<p class="zw">使用浮动布局，你就需要做大量的数学计算，这真让人无奈。即使是最简单的布局，也需要我们计算父容器中能放多少个子元素，每个子元素的宽度是多少。两个元素，宽度各50%；三个元素，每个33%的宽度，诸如此类。元素间的外边距，同样需要做大量的计算，这让Web设计更像是一场数学挑战，而不是艺术创作。</p> <p class="zw">弹性布局改变了这一窘境，让我们可以更加轻松地创作有趣的设计。更重要的是，布局结果更加灵活。继续我们的例子，来看看它到底是如何让布局变得如此简单和美好。这次我们给列表里的<code>article</code>元素设置宽度。</p> <pre class="代码无行号"><code>.item { width : 240px; }</code></pre> <p class="zw">在小屏幕上，弹性元素在主轴上等分排列。</p> <p class="图"><img alt="1113.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/89.jpg" style="width: 1257px" width="1257"></p> <p class="图题">让我们的弹性容器<code>section</code>中的弹性元素沿主轴排列，但是有时候填充不满一行。</p> <p class="zw">当弹性容器的宽度大于弹性元素组合起来的宽度，那么在右侧一般会出现空白的现象。对于一些设计来说，留白是可以接受的，但是对于另外一些设计，最好还是可以完美地填充满一行。flexbox布局也提供了相关的属性，可以让工程师去选择弹性元素在父容器中扩展或者收缩展示。</p>
