Flexbox可以为你文档内的元素提供高效的布局、对齐和空间分配方式.
FlexBox初始化
将元素初始化为弹性盒模型非常简单，只需要在父级元素上将display属性设置为flex或者inline-flex即可。
<div class="container">
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
</div>
<style>
.container {
display: flex; /* inline-flex */
outline: 1px dashed;
}
.list {
width: 100px;
height: 100px;
background-color: lightblue;
margin: 8px;
}
</style>
上方div块本身是block元素，垂直排列；声明为flex模型之后，变为flex默认的横向排列。div.container称为 弹性容器, div.list则为其弹性盒子子元素
更改为flex之后的div排列
Flex盒模型容器属性
1）flex-direction弹性伸缩方向
| 属性值 | 描述 |
|---|---|
| row | 默认值，横轴X自左向右 |
| row-reverse | 横轴X自右向左 |
| column | 纵轴Y轴自上而下 |
| column-reverse | 纵轴Y轴自下而上 |
效果对比一下
**flex-direction: row;**
**flex-direction: row-reverse;**
**flex-direction: column;**
**flex-direction: column-reverse;**
2）flex-wrap弹性换行
默认没有换行，子元素全部压缩在一行中，而设置wrap属性，则可以控制其换行。
| 属性值 | 描述 |
|---|---|
| nowrap | 默认值，不换行 |
| wrap | 在规定宽度下不能容纳所有元素，则换行 |
| wrap-reverse | 反向换行 |
如container弹性容器有9个子元素，对比效果如下：
不换行的情况下，子元素会被压缩
**flex-wrap: nowrap;**
**flex-wrap: wrap;**
**flex-wrap: wrap-reverse;**
3）flex-flow弹性流
是flex-direction和flex-wrap属性的简写形式，格式为：flex-flow: [flex-direction] [flex-wrap];
如：
<div class="container-flow">
<div class="list">1</div>
<div class="list">2</div>
<div class="list">3</div>
<div class="list">4</div>
<div class="list">5</div>
<div class="list">6</div>
<div class="list">7</div>
<div class="list">8</div>
<div class="list">9</div>
</div>
<style>
.container-flow {
display: flex;
flex-flow: column wrap;
height: 400px;
}
.list {
width: 100px;
heght: 100px;
}
</style>
每个子元素按纵轴方向排列，在一列不能容纳的情况下换行显示，如图：
**flex-flow:column wrap;**
各个属性之间还有更多的组合形式，多去尝试。
4）justify-content内容对齐
设置子元素的对齐方式。
| 属性值 | 描述 |
|---|---|
| flex-start | 默认值，在排列方向的起始方向对齐 |
| flex-end | 在排列方向的结束方向对齐 |
| center | 排列向中心对齐 |
| space-between | 每个子元素之间的距离相等 |
| space-around | 包围在每个子元素周围的空间大小相等 |
space-around可能不太好理解，对照着效果图比较一下：
**justify-content: flex-end**
**justify-content: center**
**justify-content: space-between**
**justify-content: space-around**
5）align-items元素对齐
与justify-content区别为前者为横轴基准，后者align-items则以纵轴为基准。其默认值为stretch.
| 属性值 | 描述 |
|---|---|
| flex-start | 在排列方向的起始方向对齐，纵向起始方向 |
| flex-end | 在排列方向的结束方向对齐 |
| center | 排列在中心对齐 |
| stretch | 默认值，每个子元素扩展到最大高度，填充满纵向空间 |
| baseline | 以内容底部为基准线对齐 |
<div class="container-align-items">
<!-- 默认： stretch -->
<h1 class="item">这是第1个子元素</h1>
<h3 class="item">这是第2个子元素</h3>
<h5 class="item">这是第3个子元素</h5>
</div>
<style>
.container-align-items {
outline: 1px dashed;
height: 200px;
/* 声明flex box*/
display: flex;
/* default：stretch*/
align-items: stretch;
}
.item {
background-color: lightblue;
margin: 5px;
}
</style>
如上三个子元素，当align-items取不同的值时，元素分布：
**align-items: stretch;**
**align-items: flex-start;**
**align-items: flex-end;**
**align-items: center;**
**align-items: baseline;**
对于
baseline的理解可能可以这样，其以内容的最底端为基准线来对齐元素。
6）align-content纵向内容对齐
设置在多行子元素的纵向排列, 要先将flex-wrap属性设置为换行wrap。其纵向填充空间，默认为stretch值。
| 属性值 | 描述 |
|---|---|
| flex-start | 在排列方向的起始方向对齐，纵向起始方向 |
| flex-end | 在排列方向的结束方向对齐 |
| center | 排列在中心对齐 |
| stretch | 默认值，每个子元素扩展到最大高度，填充满纵向空间，每行高度相同 |
<div class="container-align-content">
<!-- 默认stretch -->
<h1 class="content">这是第1个子元素</h1>
<h2 class="content">这是第2个子元素</h2>
<h3 class="content">这是第3个子元素</h3>
<h4 class="content">这是第4个子元素</h4>
<h5 class='content'>这是第5个子元素</h5>
<h6 class='content'>这是第6个子元素</h6>
</div>
<style>
.container-align-content {
outline: 1px dashed;
height: 200px;
/* 声明flex box*/
display: flex;
/* default：stretch*/
align-content: stretch;
/*设置换行*/
flex-wrap: wrap;
}
.content {
background-color: lightblue;
margin: 5px;
}
</style>
当如上六个子元素，随着align-content值得变化如图：
**align-content: stretch;**
**align-content: flex-start;**
**align-content: flex-end;**
**align-content: center;**
