flex布局常用属性

注意：设为flex布局以后，flex item的float、clear、vertical-align属性将失效。

一、常见的父属性

1、flex的flex-direction属性 ：设置主轴的方向（项目的排列方向）

值	描述
row 默认值	从左往右水平显示
row-reverse	与row相反，从右往左水平显示
column	从上往下垂直显示
column-reverse	与 column 相反，从下往上垂直显示
nitiali	设置该属性为它的默认值。请参阅 initial。
inherit	从父元素继承该属性。请参阅 inherit。

 

2、justify-content ：设置水平（主轴上）的子元素排列方式

属性定义了项目在主轴上的对齐方式。注意：使用这个属性之前一定要确定好主轴是哪个

值	描述
flex-start 默认值	从头部开始（如果主轴是X轴，则从左到右）
flex-end	从尾部开始排列（右对齐）
center	在主轴居中对齐（如果主轴是X轴，则水平居中）
space-around	子元素两侧的间隔相等
space-between	两端对齐，子元素间隔相等
space-evenly	表示item之间左右的间距以及项目和边框之间的距离都相等

 

3、flex-wrap ：设置子元素是否换行

值	描述
nowrap 默认值	不换行
wrap	向下换行
wrap-reverse	向上换行

 

4、align-items设置侧轴上的子元素排列方式（单行）

该属性是控制子项在侧轴（默认是y轴）上的排列方式，在子项为‘单项’（单行）的时候使用

值	描述
flex-start	从上到下（顶部对齐）
flex-end	从下到上（底部对齐）
center	挤在一起居中（垂直居中）
stretch 默认值	拉伸，若项目未设置高度或高度未auto，将占满整个容器的高度
base-line	以项目的第一行文字基线对齐

 

5、align-content 设置侧轴上的子元素排列方式（多行）

设置子项在侧轴上的排列方式，并且只能用于子项出现’换行’的情况(多行)，在单行下是没有效果的

值	描述
flex-start	上对齐
flex-end	下对齐
center	居中对齐
space-around	间隔相等
space-between	俩端对齐，间隔平均
stretch 默认值	设置子项元素高度平分父元素高度

 

6、flex-flow ：复合属性，相当于同时设置了flex-direction和flex-wrap

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

eg:  flex-flow：row nowrap

二、常见的子项属性

 

1、order属性（num）

order定义自身排列顺序。数值越小，越靠前，默认为0。-1/0/1/2/3/...

注意：和 z-index 不一样。

2、flex-grow属性（num）

flex-grow 定义自身放大比例，默认为0不放大。例如：1/2/1=25%:50%:25%

3、flex-shrink属性（num）

flex-shrink定义了空间不足时自身缩小比例，默认为1自动缩小，0不缩小。

4、flex-basis属性

flex-basis定义最小空间，默认值为auto，即自身的本来大小。

5、flex属性

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

定义子项目分配剩余空间，用flex来表示占多少份

6、align-self属性

align-self定义自身对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

eg:  align-slef:flex-end