弹性盒相关的常用css属性

弹性盒相关的常用css属性

1、添加在父元素上的的属性

div{
display: flex/inline-flex;                                                             声明div为弹性盒
flex-direction: column/column-reverse/ row/row-reverse;                                弹性盒的主轴方向
flex-wrap: nowrap/wrap/wrap-reverse;                                                   盒子内部是否换行
justify-content: flex-start/flex-end/center/space-between/space-around/space-evenly;   主轴对齐方式（默认水平方向）
align-items: flex-start/flex-end/center/baseline/stretch;                              侧轴对齐方式（默认垂直方向）
align-content: flex-start/flex-end/center/space-around/space-between;                  侧轴对齐方式（对单行不起作用）
}

1.1 单个分析
1.1.1
声明父元素被转换成弹性盒子
转换成弹性盒后float(浮动)、clear和vertical-align将会失效

display: flex/inline-flex;          声明div为弹性盒

1.1.2

flex-direction: column/column-reverse/ row/row-reverse;  弹性盒的主轴方向

属性值row是默认值是主轴水平方向从左到右
属性值row-reverse主轴水平反向
属性值column是将主轴转换成垂直方向从上至下
属性值column-reverse是将主轴转换成垂直方式向自下至上
1.1.3

flex-wrap: nowrap/wrap/wrap-reverse;               盒子内部是否换行

属性值nowrap为默认值 表示不换行
属性值wrap 表示换行
属性值wrap-reverse 表示反向换行
1.1.4

justify-content: flex-start/flex-end/center/space-between/space-around/space-evenly;
主轴对齐方式（默认水平方向）

属性值flex-start是水平方向靠左对齐
属性值flex-end是谁水平方向靠右对齐
属性值center是水平居中对齐
属性值space-between是水平两端对齐
属性值space-around是平分剩余盒子空间 两边和中间比例为1:2
属性值space-evenly是水平平分剩余盒子空间 两边和中间相同
1.1.5

align-items: flex-start/flex-end/center/baseline/stretch;
侧轴对齐方式（默认垂直方向）

属性值stretch是默认值 默认垂直方向盛满
属性值flex-start是垂直方向上靠顶部对齐
属性值flex-end是垂直方向上靠底部对齐
属性值center是垂直居中对齐
属性值baseline是垂直靠基线对齐
1.1.6

align-content:flex-start/flex-end/center/space-around/space-between;
侧轴对齐方式（对单行不起作用）

属性值flex-start是垂直方向靠左对齐
属性值flex-end是谁垂直方向靠右对齐
属性值center是垂直居中对齐
属性值space-between是垂直两端对齐
属性值space-around是垂直平分剩余盒子空间 两边和中间比例为1:2
2、添加在子元素上的属性

div{
order: unset/inherit/initial;          数值越小排列越靠前 默认为 0
flex-grow: inherit/initial/unset;      定义放大比例
flex-shrink: unset/initial/inherit;    定义缩小比例
flex: 1;                               2、3、4一块的简写   默认值 0 / auto
align-self: auto/flex-start/flex-end/center/baseline/stretch;   子元素的对齐方式
}

2.1单个分析
2.1.1
order的属性值可以为 数值 正数往后排列 负数往前排列

order: unset/inherit/initial;
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

2.1.2

flex-grow: inherit/initial/unset;
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。
如果一个项目的flex-grow属性为2，其他项目都为1，
则前者占据的剩余空间将比其他项多一倍。

2.1.3

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

2.1.4

flex-basis=width;
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。
浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，
即项目的本来大小。

2.1.5
子元素的对齐方式

align-self: auto/flex-start/flex-end/center/baseline/stretch;
子元素的对齐方式

2.1.6
flex属性是平分剩余空间
flex的属性值不能为负

flex: 1;
2、3的简写   默认值 0 / auto
flex属性是flex-grow,flex-shrink和flex-basis的简写，默认值为0 1 auto。