Flex布局模型构成
-
设置方式 ：父元素添加 display: flex，子元素可以自动的挤压或拉伸。
-
div中的子元素发生一些改变：
1. 设置了flex的盒子 称为 父项
2. 盒子里的子元素 称为 子项
-
具体变化：
1. 不再区分块级行内和行内块，全都可以设置宽和高。
2. 子项：默认的宽和高，宽度由内容撑开，高度等于父项的高。
3. 子项：使用浮动没有效果，使用定位、margin、transform都有效。
4. 默认情况下，子项总宽度大于父项的宽也不会换行，flex不会换行，只会压缩自身的宽度。
主轴对齐方式
-
使用 justify-content 调节元素在主轴的对齐方式。
（默认的主轴是X轴）
-
设置主轴对齐方式：
- 左对齐：flex-start
- 右对齐：flex-end
- 居中对齐：center
- 两侧对齐，空白间距在盒子之间：space-between
- 间隔存放，空白间距在盒子两侧：space-around
- 盒子与容器之间间距相等：space-evenly
侧轴对齐方式
-
使用align-items调节元素在侧轴的对齐方式。
（侧轴默认为Y轴，子项为单行的时候使用）
水平居中：justify-content: center;
垂直居中：align-items: center;
-
使用align-content设置侧轴上的子元素的排列方式。
（只能用于子项出行换行/多行的情况）
伸缩比
- 使用flex属性修改弹性盒子伸缩比。
- 使用align-self 设置子项在侧轴上的对齐方式。
- 设置子项的宽度：flex: 1 ;
主轴方向
-
使用 flex-direction 改变元素排列方向。
-
主轴默认水平方向：
- 从左到右：row
- 从右到左：row-reverse
-
侧轴默认是垂直方向：
- 从上到下：column
- 从下到上：column-reverse
弹性盒子换行
- 使用 flex-wrap 实现弹性盒子多行排列效果。
- 换行显示 : flex-wrap: wrap;
- 调整行对齐方式 ：align-content
