css重点-flex布局

flex布局又称为弹性布局、伸缩盒子等。

父盒子设置display:flex;后，子元素float、clear、vertical-align均失效

 

父项属性有：

1.flex-direction

设置主轴方向

2.justify-content

设置主轴上子元素排列方式

flex-start   从头部开始，主轴若是X轴，则从左到右

flex-end   从尾部开始排列

center   在主轴居中对齐

space-around   平分剩余空间

space-between   先两边贴边，再平分剩余空间

 

 

3.flex-wrap

设置子元素是否换行（默认不换行，装不下会缩小子元素宽度）

nowrap   默认值不换行

wrap  换行

4.align-items

设置侧轴上的子元素排列方式（单行）

flex-start  默认值从上到下

flex-end  从下到上

center    垂直居中

stretch   拉伸（子盒子不要给高度）

5.align-content

设置侧轴上的子元素排列方式（多行）

属性同justify-content

6.flex-flow

flex-wrap和flex-direction的复合属性

flex-wrap:row wrap;

 

flex布局子项常见属性

1.flex属性：

定义子项目分配剩余空间，flex表示占多少份数（详见圣杯布局）

2.align-self属性

子项在侧轴上的排序方式

3.order属性

项目的排列顺序（数值越小越靠前，默认0）