briany-style
v1.0.1
Published
basic layout style with flex spacing align ellipsis etc.
Downloads
3
Readme
brainy-style
brainy-style是一个基础的布局样式类,包含了flex、spacing、align、ellipsis等的相关布局。
用法
npm install brainy-style --save
1.水平居中
<div class="flex flex-justify-content-center">
我水平居中了
</div>
<div class="text-center">
我水平居中了
</div>
2.垂直居中
<div class="flex flex-align-items-center" style="height:100px;">
我垂直居中了(先设置高度)
</div>
3.水平垂直居中
<div class="flex flex-align-items-center flex-justify-content-center" style="height:100px;">
我水平垂直居中了(先设置高度)
</div>
4.水平排列并两端对齐
<div class="flex flex-justify-content-between">
<div>我是最左边的</div>
<div>我是最右边的</div>
</div>
5.一边固定宽度一边自适应宽度
<div class="flex">
<div class="flex-none" style="background:blue;width:200px;">左边固定宽度</div>
<div class="flex-auto" style="background:red;">右边自适应宽度</div>
</div>
6.超出显示省略号
<div class="text-ellipsis">
一行超出现显示省略号。一行超出现显示省略号。一行超出现显示省略号。一行超出现显示省略号。一行超出现显示省略号。一行超出现显示省略号。一行超出现显示省略号。一行超出现显示省略号。一行超出现显示省略号。一行超出现显示省略号。一行超出现显示省略号。一行超出现显示省略号。一行超出现显示省略号。一行超出现显示省略号。一行超出现显示省略号。一行超出现显示省略号。一行超出现显示省略号。一行超出现显示省略号。一行超出现显示省略号。一行超出现显示省略号。一行超出现显示省略号。一行超出现显示省略号。一行超出现显示省略号。一行超出现显示省略号。一行超出现显示省略号。一行超出现显示省略号。
</div>
<div class="text-ellipsis-2">
两行超出现显示省略号。两行超出现显示省略号。两行超出现显示省略号。两行超出现显示省略号。两行超出现显示省略号。两行超出现显示省略号。两行超出现显示省略号。两行超出现显示省略号。两行超出现显示省略号。两行超出现显示省略号。两行超出现显示省略号。两行超出现显示省略号。两行超出现显示省略号。两行超出现显示省略号。两行超出现显示省略号。两行超出现显示省略号。两行超出现显示省略号。两行超出现显示省略号。两行超出现显示省略号。两行超出现显示省略号。两行超出现显示省略号。两行超出现显示省略号。两行超出现显示省略号。两行超出现显示省略号。两行超出现显示省略号。两行超出现显示省略号。
两行超出现显示省略号。两行超出现显示省略号。两行超出现显示省略号。两行超出现显示省略号。两行超出现显示省略号。两行超出现显示省略号。两行超出现显示省略号。两行超出现显示省略号。两行超出现显示省略号。两行超出现显示省略号。两行超出现显示省略号。两行超出现显示省略号。两行超出现显示省略号。两行超出现显示省略号。两行超出现显示省略号。两行超出现显示省略号。两行超出现显示省略号。两行超出现显示省略号。两行超出现显示省略号。两行超出现显示省略号。两行超出现显示省略号。两行超出现显示省略号。两行超出现显示省略号。两行超出现显示省略号。两行超出现显示省略号。两行超出现显示省略号。
</div>