CSS神器！用display: flex让网页布局变得轻松自如

伸缩容器简介

太神奇了！这个好用到爆的伸缩容器只依靠CSS里的display: flex或者inline-flex两个属性就能实现。只需往元素上加这段小代码，瞬间就让它变成伸缩容器！而且，你还能随心所欲地调整项目大小、位置，内外部距离全都不在话下！更棒的是，即使有边角塌陷也没问题，项目依然稳稳当当地待在文档流里，该动就动，网页布局和对齐变得简单多！尤其在制作响应式设计以及手机端页面时，效果显著！

row				水平从左到右，默认值
row-reverse		水平从右到左
column			垂直从上到下
column-reverse	垂直从下到上

设置主轴方向和换行方式

nowrap			默认值，不换行
wrap			自动换行
wrap-reverse	自动换行，行翻转

注意找对角度才会真正开心呢!说到主轴，那不是咱拉赞助时经常用到的那条直线吗?最开始是从左边跑到右边的。调个头很简单，只需给容器加个神奇的 CSS 属性——flex-direction。这个属性可厉害了，可以选 four 种模式: row (从左向右), row-reverse (反过来,从右向左), column(上望下), column-reverse (翻个个儿，从下望上)。接下来是 flex-wrap，用它就能让项目换行或不换行，wrap的话就是换行了，wrap-reverse刚好相反。最后来看看 flex-flow，它把上面说的 flex-direction 和 flex-wrap 综合起来，一次搞定主轴方向和换行方式。

对齐方式设置

flex-start			默认值，主轴起始对齐
flex-end			主轴结束对齐
center				居中
space-between		两端没有空隙，中间有空隙
space-around		两端空隙是中间空隙的一半
space-enenly		两端空隙与中间空隙相等

要保持项目在主轴上的齐整，只需要动动手，把伸缩容器里面的justify-content调一下就行。总共有四个选项给你挑：flex-start（从开头排起）、flex-end（到末尾为止）、center（放在中间）、space-between（排列得开敞些，两边留空白）以及space-around（均匀分布两边）。这样搞好了，你的网站不仅看着顺眼，还会变得整洁利索！

stretch			默认值，伸缩项目在侧轴方向的长度（高度）在侧轴方向拉伸（不设置在侧轴方向的长度，才会生效）
flex-start		侧轴起点对齐
flex-end		侧轴终点对齐
center			居中对齐
baseline		文本基线对齐

侧轴上的对齐方式

strecch			默认值
flex-start		侧轴起点对齐
flex-end		侧轴终点对齐
center			居中对齐
space-between	两端没有空隙，中间有空隙
space-around	两端空隙是中间空隙的一半
space-enenly	两端空隙与中间空隙相等

你知道？侧轴上的东东可是可以调滴那个名叫Alignt-items的属性就掌控它们咋排列。用Stretch就把它们全显示；让Flex-start从开头对齐；用Flex-end就让它们到尾巴；使 Center在中间；至于Baseline，就是参照底部那根线对齐咯。接下来说下Align-content，顾名思义，就是搞定多根主轴之间的位置关系。

伸缩性与基准长度

你看到的那个伸缩器里头藏着很多小玩意儿！比如，调整一个叫做“flex-basis”的设置，你就能看出这些小家伙们是如何算出宽度和高度的了。要是没设这个，那就只能靠面积或者长度去猜测咯。还有，如果伸缩器的杆子上还有位置的话，那些小零件就会使劲长大，挤满空间为止；但要是被填满了，缩小比例也是必然的事情。最后，用”order”属性还可以给他们排个顺序，看谁跑得快，谁最慢出来。

单独设置侧轴上的对齐方式

flex: grow shrink basis;flex: 0 1 auto;   /* 扩展比率是0，收缩比率是1，基准值是auto */

在进行单点点拉伸时，就让那个家伙保持侧面对齐。只要调整一下align-self的位置，其实和align-items差不多

flex: 1;      /* flex: 1 1 0; */flex: auto;   /* flex: 1 1 auto; */flex: none;   /* flex: 0 0 auto    不伸不缩*/flex: 0 auto; /* flex: 0 1 auto */

总结与补充说明

order: 1;

总而言之，用CSS搞定网页布局，包括那些小细节，真的能让设计更高效！像”Flexbox”这种布局方式，简直就是保持元素上下左右关系的神奇工具，还能灵活适应各种大小和设备。但记得，使用Flexbox时，要时刻小心浮动和margin会影响到框架的大小。还有，矩形和流式布局处理起来还是有点儿不同的。最后，选好适合自己需求的CSS属性，稍微调整一下布局，你的网页肯定美的惊人。