我们以前的布局方法，虽然可以完成三个维度，但是每个维度都是各自为政的，一个混乱的体系。
而弹性布局则是一维布局，它有两个轴，优先关心主轴，然后用侧轴辅助。这有点像什么？我们写字，说起来就是从左往右写，这是我们优先关注的方向，但是事实上，我们一行写不下的时候，会写到下一行，这里就有一个从上往下的规则（但是很少被提及）作为辅助。
虽然我们还什么都不了解，但是说到这里应该很容易猜到，这两个轴的方向绝对是弹性布局中的一个基础。因为轴的方向一变，肯定所有元素的排列都不一样了。这简直是规定流水的方向一样的关键。
嗯，弹性布局里的流（flex-flow）就描述这两个问题。在展开之前，说明一下：在前期不建议大家使用任何复合属性（简写形式），因为有些简写十分复杂，所以一律展开书写，我也不会对于简写格式进行任何说明。
展开为两个属性 flex-direction（主轴方向），和 flex-wrap（是否换行）。继续按着写字理解：主轴方向说的就是我们书写的方向，是否换行说的是我们在侧轴方向是否进行发展。来，对应从左往右书写，从上往下换行来理解一下。
flex-direction（主轴方向）取值如下：
- row： flex 容器的主轴被定义为与文本方向相同（对于我们就是从左往右）。这是默认值；
- row-reverse： 和上面相反；
- column： flex 容器的主轴和块轴相同（对于我们就是从上到下）；
- column-reverse： 和上面相反。
于是我们发现，加上 reverse 就表示相反方向。这样四个值，其实只是两个方向，和两个反方向。row 是横向，column 是纵向。后一个单词可能我们没见过，但是 row 我们学过，而且前面表格的 tr 就是 table row 的缩写，表示表格中的行。
flex-wrap（是否换行）取值如下：
- nowrap： 不换行，打死不换行，溢出都不换行，这是默认值；
- wrap： 有需要就换行；
- wrap-reverse： 有需要就换行，反向换行。
如果主轴是左右方向，正常的换行方向就是从上往下，反向你懂得。不换行就是不在侧轴方向发展，那就没所谓了。
如果主轴是上下方向，那么换行方向就是从左往右，反向你依旧懂得。
我知道，你们又拿起了板砖。说我讲了一章弹性布局，哪一句都听懂了，就是完全不知道怎么用，什么破课程，退钱退钱……
我就说两点：第一、没交钱先把钱交一下，然后才能排队退钱；第二、你现在给父元素应用上前面所学的三个属性，那么里面的子元素就像一个个文字一样乖乖排列好了呀~
这，难么？
代码能有多难？
暂无评论内容