由于掘金不支持 html 文件格式，可以转到我的博客 flex布局 手动操作 button 按钮，更加有感觉。
一、传统布局（盒模型）
display + float + position, 布局不够灵活
<div class="inline tradition"><div></div>
</div>
复制代码.tradition {margin: .5rem auto;margin-right: .3rem;width: 8rem;height: 5rem;background: #ccc;position: relative;
}
.tradition div {position: absolute;left: 50%;top: 50%;margin-left: -1rem;margin-top: -1rem;width: 2rem;height: 2rem;background: darkorange;
}
复制代码二、弹性盒模型
<div class=" flexbox"><div></div>
</div>
复制代码.flexbox {width: 8rem;height: 5rem;background: #ccc;display: flex;
}
.flexbox div {width: 2rem;height: 2rem;background: blue;margin: auto;
}
复制代码三、容器与项目
容器 默认存在两根轴：
- 水平的主轴（main axis）: 主轴的开始位置（与边框的交叉点）叫做 main start，结束位置叫做 main end；
- 垂直的交叉轴（cross axis）:交叉轴的开始位置叫做 cross start，结束位置叫做 cross end。
项目 默认沿主轴排列
- 单个项目占据的主轴空间叫做 main size，
- 占据的交叉轴空间叫做 cross size。
四、容器的属性
新建一个容器，三个项目
<div class="bg container"><div class=" item item1">1</div><div class=" item item2">2</div><div class=" item item3">3</div>
</div>
复制代码.bg {background: #ccc;width: 10rem;height: 7rem;margin: .3rem;
}
.container {display: flex;
}
.item {width: 2rem;height: 2rem;line-height: 2rem;text-align: center;font-size: 1rem;
}
.item1 {background: #f55;
}
.item2 {background: darkorange;
}
.item3 {background: #0f0;
}
复制代码1、 flex-direction ( 改变主轴的方向 )
2、 justify-content ( 改变项目在主轴方向的排列方式 )
3、 align-items ( 项目在侧轴方向上的排列方式 )
4、 flex-wrap ( 项目在一条轴线上排列不下 是否换行 )
5、 flex-flow ( 复合flex-direction 与flex-wrap )
五、项目的属性
1、 order ( 项目的排列顺序 值小的在前 )
2、 flex-grow ( 子项分配容器剩余空间的比例 )
默认为0：即容器有剩余空间，子项也不占用 容器存在剩余空间
子项如何分配: 通过给需要扩张的子项设置flex-grow属性，该属性的值被称为权重（无单位），即容器剩余空间将按照这个权重来分配
flex-grow 的计算: 比如剩余空间为 x，三个元素的 flex-grow 分别为 a，b，c。设 sum 为 a + b + c。那么三个元素将得到剩余空间分别是 x * a / sum, x * b / sum, x * c / sum
3、 flex-shrink ( 容器的空间不够时，让各个项目收缩以适应有限的空间)
默认值为1
容器的宽度为900px
父元素 800px
三个子元素分别设置为 200px，300px，400px
三个子元素的 flex-shrink 的值分别为 1，2，3
首先，计算子元素溢出多少：200 + 300 + 400 - 800 = -100px
那这-100px 将由三个元素的分别收缩一定的量来弥补
具体的计算方式为：每个元素收缩的权重为其 flex-shrink 乘以其宽度。
所以总权重为 1 * 200 + 2 * 300 + 3 * 400 = 2000
三个元素分别收缩：
-100(溢出)* 1(flex-shrink) * 200(width) / 2000 = -10
-100(溢出) * 2(flex-shrink) * 300(width) / 2000 = -30
-100(溢出) * 3(flex-shrink) * 400(width) / 2000 = -60
三个元素的最终宽度分别为：
200 - 10 = 190
300 - 30 = 270
400 - 60 = 340
4、 flex-basis ( 就是width的替代品 优先级比width高)
5、 align-self(允许单个项目与其他项目不一样的对齐方式)
可以覆盖容器设置的align-items属性
6、 flex属性
flex-grow flex-shrink flex-basis属性的复合,后面两个可以省略
应该是子项中最好用的属性了