# flex 布局原理
flex 是 flexible Box 的缩写，意为 “弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。
- 当我们为父盒子设为 flex 布局以后，子元素的 float,cleat和vertical-align属性将失效。
- 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex 布局
总结来说就是通过给父盒子添加 flex 属性，来控制子盒子的位置和排序方式
# 常见父项属性
以下有 6 个属性是对父元素设置的
- flex-direction: 设置主轴的方向
- justify-content: 设置主轴上的子元素排序方式
- flex-wrap: 设置子元素是否换行
- align-content: 设置侧轴的子元素的排序方式 (多行)
- align-items: 设置侧轴上的子元素排序方式 (单行)
- flex-flow: 复合属性，相当于同时设置了 flex-direction 和 flex-warp
# flex-direction 设置主轴的方向
# 主轴与侧轴
在 flex 布局中，是分为主轴和侧轴两个方向的，同样的叫法有：行和列，x 轴 和 y 轴
- 默认主轴方向就是 x 轴方向，水平向右
- 默认侧轴是方向是 y 轴方向，水平向下
# 属性值
flex-direction 属性决定主轴的方向 (即项目的排列方向)
注意：主轴的侧轴是会变化的，就看 flex-direction 设置谁为主轴，剩下的就是侧轴，而子元素是跟着主轴来排序的
| 属性值 | 说明 |
|---|---|
| row | 默认值从左到右 |
| row-reverse | 从右到左边 |
| column | 从上到下 |
| column-reverse | 从下到上 |
# justify-content 设置主轴上的子元素排列方式
justify-content 属性定义了项目在主轴上的对齐方式
注意：使用这个属性之前一定要确定好主轴是哪个
| 属性值 | 说明 |
|---|---|
| flex-start | 默认值 从头部开始 如果主轴是 x 轴，则从左到啊啊有 |
| flex-end | 从尾部开始排列 |
| center | 在主轴居中对齐 (如果主轴是 x 轴则水平居中) |
| space-around | 平均剩余空间 |
| space-between | 先两边贴边 再平分剩余空间 |
# flex-wrap 设置子元素是否换行
默认情况下，项目都排在一条线上 (又称 “轴线”)，flex-wrap 属性定义，flex 布局中默认是不换行的。
| 属性值 | 说明 |
|---|---|
| nowrap | 默认值，不换行 |
| wrap | 换行 |
# align-items 设置侧轴上的子元素排序方式 (单行)
| 属性值 | 说明 |
|---|---|
| flex-start | 默认值 从上到下 |
| flex-end | 从下到上 |
| center | 挤在一起居中 (垂直居中) |
| stretch | 拉伸 |
# align-content 设置侧轴上的子元素排序方式 (多行)
设置子项在侧轴上的排列方式并且只能用于子项出现 换行，在单行下是没有效果的
| 属性值 | 说明 |
|---|---|
| flex-start | 默认值在侧轴的头部开始排列 |
| flex-end | 在侧轴的尾部开始排列 |
| space-around | 子项在侧轴平分剩余空间 |
| space-between | 子项在侧轴先分布在两头，在平分剩余空间 |
| stretch | 设置子项元素高度平分父元素高度 |
| stretch | 设置子项元素高度平分元素高度 |
# flex-flow
flex-flows 是 flex-direction 和 flex-wrap 的复合属性
# 常见子属性
- flex 子项目占的份数
- align-self 控制子项自己在侧轴的排列方式
- order 属性自定义子项的排列顺序
# flex 属性
flex 属性定义子项目分配剩余空间，用 flex 来表示占多少份数
.box{ | |
flex:1; | |
} |
# align-self 控制子项自己在侧轴的排列方式
align-self 属性允许单个项目与其他项目不一样的对齐方式，可覆盖 align-item 属性 默认值为 auto ，表示继承父元素的 align-items 属性 ，如果没有父元素，则等同于 stretch
.big :nth-child(1) { | |
align-self: center; | |
} |
# order 属性定义项目的排列顺序
数值越小 排列越靠前 默认为 0
与 z-index 不同
# 复习
经典学了忘记，现在写博客里就可以看看啦，要不是 充电器 说要卷我 我可能要很久才会 复习 flex 布局 0.0 为了感谢他 我明天和他打羽毛球要干爆他。
