Flex Box（弹性盒子）
弹性盒子是 CSS3 的一种新的布局模式。提供了一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间，更简便、完整、响应式地实现各种页面布局。
比如内容居中就变得很简单：
css
.box {
display: flex;
}
.container {
margin: auto;
}tip ：本文探讨的是一些常用的定位属性值，一些溢出对齐、基线对齐感兴趣的可以自行查阅mdn。
基本概念
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
使用了Flex布局的元素，称为弹性容器(Flex container)。对应的它的所有子元素自动成为弹性项目（Flex itme）。容器默认存在两根轴: 水平的主轴（main axis）和垂直的交叉轴（cross axis）(侧轴)。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
css
.box {
display: flex;
display: -webkit-flex; /* Safari */
}
注意一 ：设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。 注意二 ：设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
所以：弹性盒子 = 弹性容器 + 弹性项目。
容器属性
容器属性有6个
flex-direction
主轴的方向水平或垂直（即项目的排列方向）。
语法：
sql
flex-direction: row | row-reverse | column | column-reverse| 属性值 | 描述 |
|---|---|
| row | 默认值，主轴为水平方向（水平布局），起点在左端，从左向右排列 |
| row-reverse | 主轴为水平方向（水平布局），起点在右端，从右向左排列 |
| column | 主轴为垂直方向（垂直布局），起点在上沿，从上往下排列 |
| column-reverse | 主轴为垂直方向（垂直布局），起点在下沿，从下往上 |
flex-wrap
指定弹性盒子的子元素换行方式。
语法：
lua
flex-wrap: nowrap | wrap | wrap-reverse | initial | inherit;| 属性值 | 描述 |
|---|---|
| nowrap | 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器 |
| wrap | 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行 |
| wrap-reverse | 反转 wrap 排列 |
flex-flow
属性是flex-direction属性和flex-wrap属性的简写形式。
语法：
css
flex-flow: flex-direction flex-wrap;justify-content
定义了项目在主轴上的对齐方式。
语法：
sql
justify-content: flex-start | flex-end | center | space-between | space-around| 属性值 | 描述 | 图示 |
|---|---|---|
| flex-start | 默认值，沿主轴起点对齐（左对齐） |  |
| flex-end | 沿主轴终点点对齐 （右对齐） |  |
| center | 沿主轴居中 |  |
| space-between | 两端对齐，项目之间的间隔都相等 |  |
| space-around | 项目两侧的间隔相等，项目彼此之间的间隔是项目与边框的间隔的2倍 |  |
| space-evenly | 项目均匀排列，彼此之间的间隔相等 |  |
align-items
定义项目在交叉轴上的对齐方式。
语法：
css
align-items: flex-start | flex-end | center | baseline | stretch;| 属性值 | 描述 | 图示 |
|---|---|---|
| flex-start | 交叉轴的起点对齐。 |  |
| flex-end | 交叉轴的终点对齐 |  |
| center | 交叉轴的居中对齐 |  |
| baseline | 项目的第一行文字的基线对齐。图示中的文字没有居中 |  |
| stretch | 如果项目未设置高度或设为auto，项目将沿轴线占满整个容器的高度；若项目设置高度，效果同flex-start。图示中item未设置高度 |  |
align-content
定义了交叉轴方向多根轴线的对齐方式，即多行情况下弹性盒子与容器位置的相对关系。如果项目只有一根轴线即单行情况，该属性不起作用。
| 属性值 | 描述 | 图示 |
|---|---|---|
| flex-start | 交叉轴的起点对齐。 |  |
| flex-end | 交叉轴的终点对齐 |  |
| center | 交叉轴的居中对齐 |  |
| space-between | 与交叉轴两端对齐，空白间距均分在所有项目之间 |  |
| space-around | 沿交叉轴两侧的间隔相等，空白间距均分在所有项目两侧 |  |
| space-evenly | 沿交叉轴均匀排列，所有项目和容器之间间距相等 |  |
项目属性
项目属性有6个
order
用整数值来定义排列顺序，数值小的排在前面。可以为负值，默认为0。
语法：
css
.item {
order: <integer>;
}
flex-grow
定义定义项目元素的扩展比率，默认为 0 ，即如果存在剩余空间，也不放大。
示例一：
所有项目flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。
示例二：
所有项目flex-grow属性都为1，第一个项目的内容不一样。
示例三 ： 将中间一个项目flex-grow属性设置为2： 
flex-shrink
定义了项目的缩小比例，默认为 1 ，即如果空间不足，该项目将缩小，负值对该属性无效。
示例一 ： 所有项目flex-shrink属性都为1，即如果空间不足，该项目将缩小。
示例二 ： 将中间一个项目flex-shrink属性设置为0，则空间不足时，该项目不缩小：
flex-basis
定义了在分配多余空间之前，项目占据的主轴空间（main size）的大小。默认值为auto，即项目的本来大小。
示例一 ： 设为跟width或height属性一样的值，则项目将占据固定空间。
示例二： 设为百分比形式
flex
flex属性是flex-grow,flex-shrink和flex-basis的简写，默认值为0 1 auto（即在有剩余空间时，只放大不缩小）。后两个属性可选。- 两个快捷值
auto (1 1 auto)和none (0 0 auto)。 flex: 1，相当于只设置了flex-grow- 建议优先使用
flex属性，而不是单独写三个，因为浏览器会推算相关值。
align-self
允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性。用法除了auto，其他都与align-items属性完全一致。
语法：
arduino
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}示例 ： 将第二个项目的align-self属性设置为flex-end
个人的学习总结，有误的地方欢迎指正！