百分比布局就是在传统布局中将盒子宽度换为其父亲宽度的百分比，较为简单。不做整理
知识导航
- 简单介绍
- 父项常见属性
- 子项常见属性
1. 简单介绍
flex布局又被意为弹性布局，它为盒装模型提供了最大的灵活性。并且任意一个盒子都可以被指定为flex布局模式即任何的盒子均可以添加这个属性。
采用flex布局的元素，被称为flex容器。它的所有子元素自动称为其容器成员，被称为flex项目。最大的作用就是：通过给父亲添加flex属性，从来控制内部项目的位置及排序方式
值得注意的是：给父盒子添加了flex属性之后，子元素的float、clear 和 vertical-align 属性将失效。
2. 父项常见属性
2.1 flex-direction设置主轴的方向
flex布局中。分为主轴和侧轴俩个方向，也即为我们传统布局中的x轴y轴。子元素项目按照这俩个参考坐标系进行位置排列
默认：
- 默认主轴方向就是 x 轴方向，水平向右
- 默认侧轴方向就是 y 轴方向，水平向下
设置主轴的基本语法：
flex-direction :row;
其他属性值：
示例：
代码：
div {
display: flex;
flex-direction: row-reverse;
width: 500px;
height: 500px;
border: 1px solid red;
}
span {
margin: 0 10px;
width: 100px;
height: 100px;
background-color: aquamarine;
}
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
效果图：
设置成column的效果图：
2.2 justify-content 设置主轴上的子元素排列方式
其属性值：
效果案例
- center效果
- space-between效果
2.3 flex-wrap设置是否换行
先来看我这一段结构：
flex的显示模式中，一个div盒子里面放了6个均为宽100的span盒子（暂时不考虑边框）。按照传统模式想，一行放不开肯定会是掉到下一行的。但是看效果：
默认情况下，项目都排在一条线（又称”轴线”）上。flex布局中默认是不换行的。它会自动压缩到一行去显示。这便用到了我们这个换行属性了
属性：flex-wrap
属性值
nowrap不换行wrap换行
换行后的效果：
补充：
flex-flow 属性是flex-direction 和 flex-wrap属性的复合属性
如eg：
flex-flow:row wrap;
2.4 align-items 设置侧轴上的子元素排列方式（单行 ）
该属性是控制子项在侧轴（默认是y轴）上的排列方式 在子项为单项（单行）的时候使用
| flex-star | 从头部开始 |
|---|---|
| flex-end | 从尾部开始 |
| center | 居中显示 |
| stretch | 拉伸 |
效果图：设置主轴居中侧轴居中
2.5 align-content 设置侧轴上的子元素的排列方式（多行）
设置子项在侧轴上的排列方式 并且只能用于子项出现 换行 的情况（多行）
属性值：
拿上面换行的案例举例，设置为从头排列：
3. 子项常见属性
3.1 flex属性
flex 属性定义子项目分配剩余空间，用flex来表示占多少份数。
如：
效果图：
3.2 align-self控制子项自己在侧轴上的排列方式
直接给项目添加属性，控制它在侧轴上的排列方式。它们的默认值为 auto，表示继承父元素的 align-items 属性。
举例如让上图第三号span盒子侧轴居中
代码片段：
div span:nth-child(3) {
flex: 2;
align-self: center;
}
效果图：
常用属性值
- flex-start
- flex-end
- center
3.3 order 属性定义项目的排列顺序
和z-index相似，只不过z-index是数大的显示遮住数字小的。而order是数字越小排列顺序越往前。
举例：
效果图：
知识框架
