CSS - 弹性布局 弹性布局的特性，父元素上的弹性布局，当父元素为弹性布局 子元素上的弹性布局

1.弹性布局的特性

(1)任何一个容器都可以指定为弹性布局

(2)当我们为父盒子设置为弹性布局之后，子元素的float，clear，vertical-align属性将失效

(3)通过给父元素设置flex属性，来控制子盒子的排列方式与位置

 

2.父元素上的弹性布局

(1) 设置为弹性布局

display: flex;

 

(2) 设置子元素主轴的排列方向

flex-direction: row;

属性值 row 默认值 从左往右，column 从上到下

row-reverse 从右往左，column-reverse 从下到上

 

(3) 设置子元素主轴的排列方式

justify-content: flex-start;

属性值 flex-start 默认值 从头部开始排列，flex-end 从尾部开始排列

center 居中对齐，space-around 平分剩余空间，space-between 先两边贴边，再平分剩余空间

 

(4) 设置子元素是否换行

/*不换行 默认值*/
flex-wrap: nowrap;

/*换行*/
flex-wrap: wrap;

 

(5) 设置子元素侧轴的排列方式

方式1 当设置为不换行时(flex-wrap：nowrap) 用 align-items 属性

align-items: flex-start;

属性值 flex-start 默认值 从头部开始排列，flex-end 从尾部开始排列

center 居中对齐，stretch (默认值)拉伸到与父元素一样高或者是一样宽

 

方式2 当设置为不换行时(flex-wrap：wrap) 用 align-content 属性

align-content: flex-start;

属性值 flex-start 默认值 从头部开始排列，flex-end 从尾部开始排列

center 居中对齐，space-around 平分剩余空间，space-between 先两边贴边，再平分剩余空间

stretch (默认值)拉伸到与父元素一样高或者是一样宽

 

2.当父元素为弹性布局 子元素上的弹性布局

(1) 分配剩余空间

flex: 0;

属性值 0 默认值 数值越大分配的剩余空间越多，都为1时 平均分配剩余空间

 

(2) 设置某一项跟父类设置的不同的排列方式(主轴)

align-self: flex-start;

属性值 flex-start 默认值 从头部开始排列，flex-end 从尾部开始排列

center 居中对齐，stretch (默认值)拉伸到与父元素一样高或者是一样宽

 

(3) 设置自定义排列顺序

order 设置排列顺序 数值越小，越靠前 默认为0