开始
本篇文章希望能够让大家都很清楚理解 FlexBox，很多时候小伙伴们，可能因为理解的不够清楚，从而在编写代码中，需要一个个的尝试。
下面给大家推荐一个 Github 比较好的一个** flexbox** 工具，以及演示地址，可以在线演示，帮助大家更快的理解。
演示地址：https://jonathantneal.github.io/flexibility/
Github地址：https://github.com/sin-ning/flexibility
基础知识和术语
container 容器
也就所我们所谓的 parentNode，用来承载自容器的父级容器都可以叫做 container。
image
items 每一项
可以理解为 childrenNode，每个子节点。
image
我们在开始使用的回收需要将 display 设置为 flex
.container {
display: flex; /* or inline-flex */
}
order 排序
排序规则，可用于每个节点间的排序，无论你节点顺序是什么，只要加上 order 设置数值，就会按数值排序。
如：节点 a = 3 b=1 c=2 那么最终展示的顺序是 b c a
.item {
order: <integer>; /* default is 0 */
}
image
flex-direction
flex 方向，可用于不同的排列方式
- row（默认）：从左到右ltr; 从右到左rtl
- row-reverse：从右到左ltr; 从左到右rtl
- column：同样row但从上到下
- column-reverse：同样row-reverse但从下到上
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
image
flex-grow
这定义了Flex项目在必要时增长的能力。它接受一个无比的值作为一个比例。它规定了项目应占用的Flex容器内可用空间量。
如果所有项目都flex-grow设置为1，则容器中的剩余空间将平均分配给所有子项。如果其中一个孩子的值为2，则剩余空间将占用其他空间的两倍（或者至少会尝试）。
.item {
flex-grow: <number>; /* default 0 */
}
image
flex-wrap
默认情况下，flex项目都会尝试适合一行。您可以更改它并允许项目根据需要使用此属性进行换行。
- nowrap （默认值）：所有弹性项目都在一行上
- wrap：flex项目将从上到下包裹到多行。
- wrap-reverse：flex项目将从下到上包裹多行。
.container{
flex-wrap: nowrap | wrap | wrap-reverse;
}
image
justify-content
- flex-start （默认值）：项目朝向起始行打包
- flex-end：物品被打包到终点线
- center：项目沿着线居中
- space-between：物品均匀分布在线上; 第一项是在起始行，最后一项是在结束行
- space-around：项目均匀分布在行周围，空间相等。请注意，在视觉上空间不相等，因为所有项目在两侧都有相等的空间。第一个项目将在容器边缘上有一个空间单位，但在下一个项目之间有两个单位的空间，因为下一个项目有自己适用的间距。
- space-evenly：项目是分布的，以便任何两个项目之间的间距（和边缘的空间）相等。
.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
image
align-items
这允许align-items为各个弹性项覆盖默认对齐（或指定的对齐）。
请参阅align-items说明以了解可用的值。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
请注意float，clear并且vertical-align对弹性项目没有影响。
image
align-items
- flex-start：项目的交叉开始边缘边缘放置在交叉起始线上
- flex-end：项目的跨端边距边缘放在十字线上
- center：项目以横轴为中心
- baseline：项目已对齐，例如其基线对齐
- stretch （默认）：拉伸以填充容器（仍然尊重最小宽度/最大宽度）
.container {
align-items: flex-start | flex-end | center | baseline | stretch;
}
image
align-content
- flex-start：行打包到容器的开头
- flex-end：行打包到容器的末尾
- center：行包装到容器的中心
- space-between：线条均匀分布; 第一行是容器的开头，而最后一行是在最后一行
- space-around：线条均匀分布，每条线周围的空间相等
- stretch （默认值）：线条拉伸以占用剩余空间
.container {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
image
