设置了 display：flex; 的盒子会变成一个弹性盒子。弹性盒子会多出了主轴和侧轴的概念。
- 主轴：默认水平向右
- 侧轴：默认垂直向下，与主轴垂直
注意点： 弹性盒子内部的子元素会默认沿着主轴方向排布！
在flex布局中一般会把父元素称之为：flex容器，子元素称之为：flex项目
什么时候用flex布局
flex布局是css3中新出的布局方式，存在一定的兼容性问题
| 传统布局 | 弹性布局 |
|---|---|
| 兼容性好 | css3新布局，PC端中存在兼容性问题（如：IE） |
| 布局繁琐 | 布局方便 |
| 常用于PC端布局 | 常用于移动端布局 |
布局方法的原则：
- 如果是pc端页面布局，我们一般还是考虑传统布局方式
- 如果是移动端或者不考虑兼容性问题的pc端页面布局，我们一般就可以考虑flex弹性布局如果不用考虑兼容性问题，flex布局会更加方便
主轴方向 flex-direction
弹性盒子中主轴方向默认是水平向右的。
但是其实可以通过
flex-diretion属性修改主轴的方向
| 取值 | 效果（主轴方向） |
|---|---|
| row | 水平向右（默认） |
| row-reverse | 水平向左 |
| column | 垂直向下 |
| column-reverse | 垂直向上 |
主轴对齐方式 justify-content
| 效果 | 取值 |
|---|---|
| 向主轴开始方向对齐 | flex-start |
| 向主轴结束方向对齐 | flex-end |
| 居中对齐 | center |
| 让空白环绕盒子显示 | space-around |
| 空白只在两者之间显示 | space-between |
| 空白均分 | space-evenly |
单行侧轴对齐方式 align-items
| 效果 | 属性名 |
|---|---|
| 向侧轴开始方向对齐 | flex-start |
| 向侧轴结束方向对齐 | flex-end |
| 居中对齐 | center |
| 拉伸显示（默认值） | stretch |
stretch：让子盒子在侧轴方向拉伸显示
只有当子元素在侧轴方向没有设置宽度或者高度时，才会有拉伸效果（否则以设置的值为准）
注意点：
- 侧轴方向不设置大小会默认拉伸，主轴方向不设置大小会由内容撑开
- 主轴如果变成垂直方向，侧轴会变成水平方向
是否换行 flex-wrap
flex布局中，默认是单行显示的，如果子元素的宽度之和超出了父元素的宽度，此时子盒子会默认压缩显示。
此时，如果需要设置子元素换行显示，可以使用属性
flex-wrap
| 属性值 | 效果 |
|---|---|
| nowrap | 不换行（默认值） |
| wrap | 换行 |
多行侧轴对齐方式 align-content
| 取值 | 效果 |
|---|---|
| flex-start | 向侧轴的开始位置对齐 |
| flex-end | 向侧轴的结束位置对齐 |
| center | 居中对齐 |
| stretch | 子元素高度拉伸显示（只有没设高才有效果） |
| space-around | 空白环绕盒子显示 |
| space-between | 空白只在盒子之间显示 |
align-items与align-content的区别：
- 如果子元素没有换行，只有一行的时候使用
align-items - 如果子元素有多行，此时 控制多行 的时候使用
align-content
分配子元素空间 flex
作用： 按照份数分配父元素主轴（宽度）的剩余空间
优先分配具体的宽度，剩余的空间再按照份数分配。
代码： flex:份数（数字）;
* 子元素排序 order
作用： 设置弹性盒子中子元素的排列顺序，数值越小，排列靠前，默认是0
代码： order：数字;
单个子元素侧轴对齐方式 align-self
| 取值 | 效果 |
|---|---|
| flex-start | 向侧轴的开始位置对齐（默认相当于顶部对齐） |
| flex-end | 向侧轴的结束位置对齐（默认相当于底部对齐） |
| center | 居中对齐 |
| stretch | 子元素高度拉伸显示（只有没设高才有效果） |
- 取值和 align-items 取值一样
发表回复