flex布局

flex-direction 属性

用于控制子元素排列方向与顺序，默认row，即横向排列

取值：

• row(默认)：横向排列
• row-reverse：从右侧开始
• column：纵向
• column-reverse：纵向从底部开始排

flex-wrap 属性

用于控制子元素是否换行，nowrap表示不换行；

取值：

• nowrap：默认不换行，默认会缩放
• wrap：换行
• wrap-reverse：第一行在下方

flex-flow 属性

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

justify-content 属性

主轴上的对齐方式

取值：

• flex-start：(默认)左对齐
• flex-end：右对齐
• center：居中
• space-between：左右段对齐，即左右两侧子元素都紧贴容器，且子元素之间间距相等。

• space-around：子元素之间间距为左右两侧子元素到容器间距的2倍，比较特别的布局，日常使用不太多

• space-evenly：为项目之间间距与项目与容器间距相等，相当于除去子元素宽度，平均分配了剩余宽度作为子元素左右margin

align-items 属性

侧轴上的对齐方式

取值：

• flex-start：会让子元素在纵轴紧贴容器顶部

• flex-end：会让子元素在纵轴紧贴容器底部

• center：会让子元素在侧轴中心位置排列

• baseline：比较特殊，它让子元素以第一行文字的基线为参照进项排列

• stretch(默认)：stretch即如果未设置高度，或高度为auto，则占满整个容器

align-content 属性

定义了多根轴线的对齐方式

取值：

• flex-start（效果）

• flex-end（效果）

• center（效果）

• space-between（效果）

• flex-start（效果）

• stretch（效果）

元素的属性

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

order

定义项目的排列顺序。数值越小，排列越靠前，默认为0

flex-grow

flex-grow属性定义项目的放大比例，主要在父元素的宽度大于子元素的宽度之和时候起作用，它定义子元素如何分配父元素的剩余宽度，默认为0，这个时候不索取父元素的宽度。

flex-shrink

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

flex-basis

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间(默认值为auto，即项目的本来大小)

flex

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。

align-self

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。