<p class="zw">在本书第一部分中，我们列举了大量的设计案例，但是当你稍后查看这些网页时，你一定会惊讶，这些形形色色的设计案例，它们的主要标签结构都是相同的。</p> <p class="图"><img alt="1102.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/78.jpg"></p> <p class="图题">利用flexbox技术，制作一个包含侦探小说的列表，列表内容包括该小说的封面和内容简介。</p> <p class="zw">首先，我们写一个<code>div</code>结构，并给它挂载一个名为<code>item</code>的样式类名。在这个<code>div</code>内部，增加两个并列的<code>div</code>子元素，一个用来展示封面，一个用来展示内容简介。</p> <pre class="代码无行号"><code><div class="item"> <div class="item__img"> <img src="hardboiled.jpg" alt=""></a> </div> <div class="item__description"> <h3>The Scarlet Menace</h3> </div> </div></code></pre> <p class="zw">根据在源码里的排列顺序，小说封面和内容简介，都将呈现自然的垂直排列状态，即一个在另外一个的上面。我们可以轻松地改变这个自然状态，通过设置<code>item</code>元素，将其转变为一个弹性容器。<code>flex</code>是一个新的<code>display</code>属性值，目前它的值包括<code>block</code>、<code>inline</code>、<code>inline-block</code>、<code>none</code>和<code>table</code>等。</p> <pre class="代码无行号"><code>.item { display : flex; }</code></pre> <p class="zw"><code>flex</code>将<code>item</code>设置为弹性容器，但是并没有移除它的<code>block</code>属性, 所以这个<code>div</code>结构继续占据其父元素的可用空间。</p> <p class="图"><img alt="1103.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/79.jpg" style="width: 1254px" width="1254"></p> <p class="图题">像所有的块级元素一样，<code>item</code>项将占满其父元素的一整行空间，除非我们做了特别设置。</p> <p class="zw">当不需要<code>item</code>元素占满一行，或者想在弹性容器中增加内联元素的时候，我们可以按照如下方式设置。</p> <pre class="代码无行号"><code>.item { display : inline-flex; }</code></pre> <p class="zw">观察第一个例子，我们会发现为<code>item</code>设置了<code>display:flex</code>后，小说封面和内容简介都不再是垂直显示的了。这是因为我们将父元素设置成了弹性容器，它的子元素默认就变成了弹性元素，并会自动沿主轴方向横向排列。flexbox布局的发明者，设置了很多类似的非常聪明的默认项；对于一些开发者来说，这将会是非常非常有用的。</p>
