什么是 Flex 布局
使用 flex 布局模型可以快速、灵活的开发网页
在此之前，我们学过，多个盒子横向排列可以使用 浮动 属性来实现，设置盒子间的间距用 margin 属性完成，但在这里需要注意浮动的盒子会 脱标 的问题。
而 Flex 布局可以 避免浮动脱标 的问题，Flex 布局通常也称为 弹性布局 ，是一种浏览器推荐的布局模型，它能使布局网页更简单、灵活。
Flex 布局适合 结构化 布局，基于 Flex 精确灵活控制 块级 盒子的布局方式，避免浮动布局中脱离文档流现象发生。
Flex 布局模型
Flex 布局时，给 父元素 添加 display:flex; 子元素可以自动的挤压或拉伸
组成部分：
- 弹性容器
- 弹性盒子
- 主轴
- 侧轴 / 交叉轴
下面是一张很形象的图，可做参考：
Flex 布局默认 主轴 在 水平 方向，弹性盒子都是沿着主轴排列的，如下图：视觉效果是所有子级在一行排列
HTML
<style>
.box {
display: flex;
height: 200px;
border: 1px solid #000;
}
.box div{
width: 100px;
height: 100px;
background-color: lightgreen;
}
</style>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>主轴对齐方式
网页中，盒子之间是有距离的，在 Flex 布局模型中，通过调节 主轴 或 侧轴 的 对齐方式 来设置盒子之间的距离。
使用 justify-content 调节元素在 主轴 的对齐方式，即修改主轴对齐方式属性：
- flex-start ：从起点开始依次排列，默认值
- flex-end ：从终点开始依次排列
- center ：沿着主轴居中排列
- space-around ：弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
- space-between ：弹性盒子沿主轴均匀排列，空白间距均分在相邻盒子之间
- space-evenly ：弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等
（1）flex-start / 默认值示例
HTML
<style>
.box {
display: flex;
justify-content: flex-start; /* 从起点开始依次排列，默认值 */
height: 200px;
border: 1px solid #000;
}
.box div{
width: 100px;
height: 100px;
background-color: lightgreen;
}
</style>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>（2）flex-end 示例
HTML
<style>
.box {
display: flex;
justify-content: flex-end; /* 从终点开始依次排列 */
height: 200px;
border: 1px solid #000;
}
.box div{
width: 100px;
height: 100px;
background-color: lightgreen;
}
</style>（3）center 示例
HTML
<style>
.box {
display: flex;
justify-content: center; /* 沿着主轴居中排列*/
height: 200px;
border: 1px solid #000;
}
.box div{
width: 100px;
height: 100px;
background-color: lightgreen;
}
</style>（4）space-around 示例
HTML
<style>
.box {
display: flex;
/* 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧 */
/* 从视觉上看，自己之间的距离是父级两侧距离的 2 倍*/
justify-content: space-around;
height: 200px;
border: 1px solid #000;
}
.box div{
width: 100px;
height: 100px;
background-color: lightgreen;
}
</style>（5）space-between 示例
HTML
<style>
.box {
display: flex;
/* 弹性盒子沿主轴均匀排列，空白间距均分在相邻盒子之间 */
justify-content: space-between;
height: 200px;
border: 1px solid #000;
}
.box div{
width: 100px;
height: 100px;
background-color: lightgreen;
}
</style>（6）space-evenly 示例
HTML
<style>
.box {
display: flex;
/* 弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等 */
justify-content: space-evenly;
height: 200px;
border: 1px solid #000;
}
.box div{
width: 100px;
height: 100px;
background-color: lightgreen;
}
</style>侧轴对齐方式
使用 align-items （添加到弹性容器）调节元素在 侧轴 的对齐方式，即修改侧轴对齐方式属性：
- align-self ：控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）
- flex-start ：从起点开始依次排列，默认值
- flex-end ：从终点开始依次排列
- center ：沿着侧轴居中排列
- stretch ：弹性盒子沿着主轴线被拉伸至铺满容器，默认值
（1）align-items 添加到弹性容器，控制整个弹性容器 示例
align-items: flex-start; 从起点开始依次排列，默认值
HTML
<style>
.box {
display: flex;
从起点开始依次排列，默认值
align-items: flex-start;
height: 200px;
border: 1px solid #000;
}
.box div{
width: 100px;
height: 100px;
background-color: lightgreen;
}
</style>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>align-items: flex-end; 从终点开始依次排列
html
<style>
.box {
display: flex;
/* 从终点开始依次排列 */
align-items: flex-end;
height: 200px;
border: 1px solid #000;
}
.box div{
width: 100px;
height: 100px;
background-color: lightgreen;
}
</style>align-items: center; 沿着侧轴居中排列
HTML
<style>
.box {
display: flex;
/*沿着侧轴居中排列*/
align-items: center;
height: 200px;
border: 1px solid #000;
}
.box div{
width: 100px;
height: 100px;
background-color: lightgreen;
}
</style>align-items: stretch; 弹性盒子沿着主轴线被拉伸至铺满容器，默认值
HTML
<style>
.box {
display: flex;
/*弹性盒子沿着主轴线被拉伸至铺满容器，默认值*/
align-items: stretch;
height: 200px;
border: 1px solid #000;
}
.box div{
width: 100px;
height: 100px;
background-color: lightgreen;
}
</style>测试的时候，去掉子级的高度
HTML
<style>
.box {
display: flex;
justify-content: space-evenly;
align-items: stretch;
height: 200px;
border: 1px solid #000;
}
.box div{
width: 100px;
/* height: 100px; */
background-color: lightgreen;
}
</style>
</head>(2)align-self 单独控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）示例
默认值与上述默认值效果相同，以下示例两个：flex-end 和 center
align-self: flex-end;
HTML
<style>
.box {
display: flex;
height: 200px;
border: 1px solid #000;
}
.box div {
width: 100px;
height: 100px;
background-color: lightgreen;
}
.box div:nth-child(2){
align-self: flex-end;
}
</style>align-self: center;
HTML
<style>
.box {
display: flex;
height: 200px;
border: 1px solid #000;
}
.box div {
width: 100px;
height: 100px;
background-color: lightgreen;
}
.box div:nth-child(1){
align-self: center;
}
</style>弹性盒子的尺寸特点 - 宽高由内容撑开
子级无高度 --- 高度由内容撑开
HTML
<style>
.box {
display: flex;
height: 200px;
border: 1px solid #000;
}
.box div {
width: 100px;
/* height: 100px; */
background-color: lightgreen;
}
.box div:nth-child(2){
align-self: center;
}
</style>子级宽高都不设置 --- 宽高都由内容撑开
HTML
<style>
.box {
display: flex;
height: 200px;
border: 1px solid #000;
}
.box div {
/* width: 100px; */
/* height: 100px; */
background-color: lightgreen;
}
.box div:nth-child(2){
align-self: center;
}
</style>伸缩比
使用 flex 属性修改弹性盒子的 伸缩比 ，取值是整数数值，只占用父盒子的 剩余尺寸
HTML
<style>
.box {
display: flex;
height: 200px;
border: 1px solid #000;
}
.box div {
margin: 0 50px;
height: 100px;
background-color: lightgreen;
}
.box div:nth-child(3){
width: 80px;
}
</style>占用父级剩余尺寸的 1 份
html
<style>
.box {
display: flex;
height: 200px;
border: 1px solid #000;
}
.box div {
margin: 0 50px;
height: 100px;
background-color: lightgreen;
}
.box div:nth-child(3) {
width: 80px;
}
.box div:nth-child(2) {
flex: 1;
}
</style>其他份数
HTML
<style>
.box {
display: flex;
height: 200px;
border: 1px solid #000;
}
.box div {
margin: 0 50px;
height: 100px;
background-color: lightgreen;
}
.box div:first-child {
width: 80px;
}
.box div:nth-child(2) {
flex: 4;
}
.box div:last-child {
flex: 1;
}
</style>上述设置的含义：
第一个子盒子 80 像素固定不变；
将剩下的父元素宽度等分为 5 份，第二个子盒子占用 4 份；第三个子盒子占用 1 份，后面的两个弹性盒子会随着父级宽度的变化而变化。