flex布局

flex布局原理

flex布局为基于父元素flex-container弹性容器和子元素flex-item弹性子元素进行弹性布局

flex布局特性

flex布局默认使父元素flex-container弹性容器排列方式为flex-direction:row-----行方式排列

display:flex

将该元素设置为flex-container 弹性容器

Flex-container的特性

1. 实现子元素的弹性布局
2. 实现父元素的自动增高

Flex-direction 设置所有flex-item的排列方式

设置flex-container弹性容器下的所有flex-item的排列方式

1.row        以行方式正序排列

2.row-reverse 行方式倒序排列并将行的对齐方式改变为相反方向

3.column        列方式排列

4.column-reverse 列方式倒序排列并将列的对齐方式改变为相反方向

row弹性排列的实现原理

消除flex-container下的所有子元素flex-item的block特性-块状特效,将块元素变为了行内块元素

Justify-content 设置所有flex-item的主轴对齐方式

1.flex-start

所有flex-item向flex-container的主轴起始方向对齐

2.flex-end

所有flex-item向flex-container的主轴结束方向对齐

3.center   

所有flex-item在主轴中居中

4.space-between

第一个flex-item向主轴起点对齐，第二个flex-item向主轴末尾对齐

其他flex-item在主轴自动居中

5.space-around

所有flex-item基于主轴均分对齐

原理：

flex-item自动增加外左右外边距或自动增加上下外边距

align-items 设置所有flex-item的交叉轴对齐方式

1.flex-start

所有flex-item向flex-container的交叉轴起始方向对齐

2.flex-end

所有flex-item向flex-container的交叉轴结束方向对齐

3.center   

所有flex-item在主轴中居中

4.space-between

第一个flex-item向交叉轴起点对齐，第二个flex-item向交叉轴末尾对齐

其他flex-item在交叉轴自动居中

5.space-around

所有flex-item基于交叉轴均分对齐

6.Stretch

所有flex-item基于交叉轴自动拉伸

7.Baseline

所有flex-item基于交叉轴中的所有flex-item元素中的文字对齐

主轴

flex-item的排列方向

Flex-direction以行排列时，主轴为x轴，flex-direction以列排列时，主轴为y轴

交叉轴

flex-item的排列方向的相反方向

如果主轴为x轴时，交叉轴为y轴

如果主轴为y轴时，交叉轴为x轴

Flex-wrap Flex-item的换行特性

wrap     flex-item横向排列时溢出换行

No-wrap flex-item横向排列时溢出不换行