flex布局

小知识 09-01 21:28
flex布局设置父路径: display:flex , 使用多个div横向排列;

一、flex容器属性

1、flex-direction属性,横向排列
row(默认) 横向排列
row-reverse 横向排列倒续
column 纵向排列
column-reverse 纵向排列倒续

2、flex-wrap属性 是否换行

nowrap(默认) 不换行
wrap 换行,项目不会等分容器宽度,而是根据自身宽度进行排列,如果超出父容器宽度则自然换行。
wrap-reverse 换行,需要注意的是第一排会紧贴容器底部,而不是我们想象的项目6紧贴容器顶部,效果与wrap相反。

3、flex-flow属性

flex-flow属性是flex-deriction与flex-wrap属性的简写集合,默认属性为row nowrap,即横向排列,且不换行,如果需要控制项目排列与换行,推荐使用此属性,而非单独写两个。

4、justify-content属性

flex-start(默认)
flex-end 右对齐
center 居中对齐
space-between 两端对齐
space-around 项目之间间距为左右两侧项目到容器间距的2倍
space-evenly 为项目之间间距与项目与容器间距相等,相当于除去项目宽度,平均分配了剩余宽度作为项目左右margin。

5、align-items属性

stretch(默认)
flex-start 贴容器顶部
flex-end 贴容器底部
center 中心位置排列 
baseline 比较特殊,它让项目以第一行文字的基线为参照进行排列