<p class="zw">在考虑布局方式的时候，浮动行为似乎已经变得根深蒂固。比如，当两个浮动元素宽度超出它们的父级元素的时候，其中一个元素将会折行显示在另外一个下面。而flexbox布局有一个不同的模型，弹性元素会灵活地根据弹性容器的宽度来表现。</p> <p class="zw">我将会举例说明浮动模型与flexbox模型的区别，例子中将会在一个<code>section</code>元素中设置四个<code>article</code>元素。</p> <pre class="代码无行号"><code><section class="hb-shelf"> <article class="item"> […] </article> <article class="item"> […] </article> <article class="item"> […] </article> <article class="item"> […] </article> </section></code></pre> <p class="zw">在没有设置任何样式的情况下，这些<code>article</code>元素将会垂直排列。</p> <p class="图"><img alt="1108.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/84.jpg"></p> <p class="图题">这个列表在针对更小的屏幕时，我们不用或者只用做很小的调整。</p> <p class="zw">现在，我们为<code>section</code>元素设置<code>display:flex</code>，刷新后会看到，浏览器会创建一个横向的主轴，<code>article</code>元素将沿着水平方向分布。无需再定义任何额外的flexbox属性，浏览器会自动等分<code>section</code>元素的宽度，让<code>article</code>元素充满父元素的全部可用空间。</p> <p class="图"><img alt="1109.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/85.jpg"></p> <p class="图题">文章会沿着<code>section</code>元素的默认主轴方向排列。</p> <p class="zw">当给每一个<code>article</code>元素设置宽度的时候，你也许会感到惊讶。</p> <pre class="代码无行号"><code>.item { width : 400px; }</code></pre> <p class="zw">在浮动布局中，浏览器只要有空间就会尽可能显示<code>article</code>元素，直到填满一整行再折行显示。</p> <p class="zw">而当增加<code>article</code>元素的宽度时，浮动布局下会很快折行显示。而无论怎样，在flexbox布局中，<code>flex-wrap:nowrap</code>值优先级高于<code>article</code>元素的宽度值<code>width</code>。</p>
