Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。本文给出了 flexbox 的主要特性，更多的细节将在别的文档中探索。
我们说 flexbox 是一种一维的布局，是因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列。作为对比的是另外一个二维布局CSS Grid Layout，可以同时处理行和列上的布局。
主轴由flex-direction定义，可以取 4 个值：
rowrow-reversecolumncolumn-reverse
另外一个需要理解的重点是 flexbox 不会对文档的书写模式提供假设。过去，CSS 的书写模式主要被认为是水平的，从左到右的。现代的布局方式涵盖了书写模式的范围，所以我们不再假设一行文字是从文档的左上角开始向右书写，新的行也不是必须出现在另一行的下面。
你可以在接下来的文章中学到更多 flexbox 和书写模式关系的详细说明。下面的描述是来帮助我们理解为什么不用上下左右来描述 flexbox 元素的方向。
外面的大容器的属性的设置
1. flex-direction 主轴方向
2. flex-wrap 主轴一行满了换行
3. flex-flow 1和2的组合
4. justify-content 主轴元素对齐方式
5. align-items 交叉轴元素对齐方式//单行
6. align-content 交叉轴行对齐方式//多行
示例代码
* {padding: 0;margin: 0;}.all {display: flex;margin: 200px auto;flex-direction: row;justify-content: center;background-color: aliceblue;flex-wrap: nowrap;width: 700px;height: 100px;align-items: center;}.obj {flex: 1;margin: 2rem;text-align: center;}.img {background-image: url(./images/localnav_bg.png);height: 4rem;width: 4rem;margin: 0 auto;}.text {padding-top: 2px;}.obj:nth-child(2) .img {background-position: 0 16rem;}.obj:nth-child(3) .img {background-position: 0 12rem;}.obj:nth-child(4) .img {background-position: 0 8rem;}.obj:nth-child(5) .img {background-position: 0 4rem;}</style><body><div class="all"><div class="obj"><a href="#"><div class="img"></div></a><div class="text">景点 娱乐</div></div><div class="obj"><a href="#"><div class="img"></div></a><div class="text">周边游</div></div><div class="obj"><a href="#"><div class="img"></div></a><div class="text">美食林</div></div><div class="obj"><a href="#"><div class="img"></div></a><div class="text">一日游</div></div><div class="obj"><a href="#"><div class="img"></div></a><div class="text">当地攻略</div></div></div></body></html>
