<p class="zw">学习flexbox的难点在于理解它的视觉模型。如你所见，浮动布局模型是很好理解的，它们沿着一维水平方向排列。而flexbox的运转则包含了水平和垂直两个维度。</p> <p class="zw">当设置某一元素弹性时，我们为其设置了一个主要的轴，另外一个轴则穿过它——有时两个轴都会设置。这种能力是使用浮动布局所不能给予我们的。</p> <p class="zw">把弹性收缩想象成一条穿过并固定在盒子或者容器两面的线，会有利于理解flexbox的概念。在flexbox中，这第一条穿过盒子的线，我们称其为主轴，而沿着这条线分布的元素，我们都称之为弹性元素。这些弹性元素可以是任何构成布局的HTML元素。</p> <p class="zw">就像设置文本的左、右、居中对齐一样，我们同样可以在主轴上如此设置弹性元素。在实践中，这意味着弹性元素可以贴在弹性容器的一边或者另外一边展示，甚至是按弹性线居中停留。</p> <p class="zw">通过改变标记中的设置，可以将弹性扩展方向改为相反的方向，这样就可以让弹性元素沿着我们期望的方向排列。与传统的布局技术相比，这有着巨大优势，人们终于可以透过源代码，清晰地脑补出屏幕上的显示效果。</p> <p class="zw">flexbox布局更强大，甚至支持通过改变<code>flex</code>属性的值，来轻松的实现水平行到垂直列的切换转变。</p> <p class="zw">最后，也许是最有意思的是，我们可以更改创建布局所需显示的元素，以便适应特定的视窗大小。毫无疑问，flexbox是一款非常强大的工具，所以，让我们先用它来创建一个小说列表的例子，这也是本书所用一系列案例的基础。</p>
