Flex布局之属性篇

很多时候我们首页的九宫格之布局定位又很麻烦,框架又限于自定义问题,今天给大家带来flex布局属性

flex-container的属性有flex-direction,  flex-wrap,  justify-content,  align-items,  align-content

flex-direction(主轴方向): 
1) row(布局为一行,从start开始排)

2) row-reverse(布局为一行,从end开始排)

3) column(布局为一列,从start开始排)

4) column-reverse(布局为一列,从end开始排)

flex-wrap(一条轴线排不下如何换行)
1) nowarp (不换行,在一行显示)
2) wrap(内容超过后换行)
3) warp-reverse(换行后有两条轴线,reverse就是把轴线排列的顺序倒置过来)

justify-content(主轴对齐方式):
1) flex-start (start侧对齐,左对齐)
2) flex-end(end侧对齐,右对齐)
3) center(中心对齐)
4) space-between(左右两侧没有间距,中间间距相同)
5) justify-content:space-around(左右两侧的间距为中间间距的一半)

align-items(交叉轴对齐方式): 
1)align-items:stretch;   (拉伸)
2)align-items:flex-start(start侧开始,上对齐)
3)align-items:flex-end(end侧开始,下对齐)
4)align-content :center (中心对齐)
5)align-items:baseline(基线对齐)

align-content(多根轴线对齐方式): 
1)align-content :stretch  (拉伸)
2)align-content :flex-start  (start侧开始,上对齐)
3)align-content :flex-end(end侧开始,下对齐)
4)align-content :center  (中心对齐)
5)align-content:space-between(上下没有间距,中间各子元素间距相同)
6)align-content:space-around  (上下间距之和等于中间各个间距)

flex-item相关属性有order,flex-grow,flex-shrink,lex-basis,align-self

order(排列顺序)

flex-grow(放大比例,剩余空间怎么分配,如下图所示,剩余空间的分配比例是1:2:1)

flex-shrink (缩小比例,超出空间怎么压缩)

flex-basis  (item所占主轴空间,优先级高于width)

align-self  (对齐方式,覆盖align-items)

评论抢沙发

评论前必须登录!