<p class="zw">与浮动布局不同，在弹性布局中，弹性容器会自动扩展宽度，以适应它包含的弹性元素组合的宽度。这是因为弹性布局的发明者当时做了一个比较明智的选择，给<code>flex-wrap</code>属性设置的默认值就是<code>nowrap</code>。而把<code>flex-wrap</code>的值改为<code>wrap</code>后，完全不同的事发生了，浏览器会自动计算每一项的宽度，并在填满<code>section</code>弹性容器的一整行后，再折行显示。</p> <pre class="代码无行号"><code>.hb-shelf { flex-wrap : wrap-reverse; }</code></pre> <p class="zw">也许你已经注意到，例子中的四本小说带有1至4的序号。无论有没有设置<code>nowrap</code>或者<code>wrap</code>，这些小说的显示顺序，和源代码里的排列顺序一样，都是从左上角方向开始。弹性布局给予我们更多和更灵活的方法来控制包裹方式，比如切换<code>flex-wrap</code>的值为<code>wrap-reverse</code>，这些小说就会从左下角方向开始排列。</p> <p class="图"><img alt="1110.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/86.jpg"></p> <p class="图题">将<code>flex-wrap</code>值从默认的<code>nowrap</code>改为<code>wrap</code>后，看起来有点类似浮动布局的感觉，不过有一些值得注意的不同点。</p> <pre class="代码无行号"><code>.hb-shelf { flex-wrap : wrap-reverse; }</code></pre> <p class="图"><img alt="1111.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/87.jpg"></p> <p class="图题">包裹的弹性元素反转后，它们的起始位置发生了变化。</p> <p class="zw">此时你肯定想问：“这和对<code>flex-direction</code>设置<code>row-reverse</code>有什么区别？”这是一个好问题，让我们把<code>flex-wrap</code>的值恢复为<code>wrap</code>，然后使用<code>flex-direction</code>的<code>row-reverse</code>来看看。</p> <pre class="代码无行号"><code>.hb-shelf { flex-wrap : wrap; flex-direction : row-reverse; }</code></pre> <p class="zw">如此一番，我们可以看到被包裹的弹性元素的起始位置从左下角变为了右上角。</p> <p class="图"><img alt="1112.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/88.jpg"></p> <p class="图题">仔细观察<code>flex-wrap</code>与<code>flex-direction</code>之间的区别，可以让我们更好地理解flexbox布局的潜力。</p>
