在本书第一部分中，我们列举了大量的设计案例，但是当你稍后查看这些网页时，你一定会惊讶，这些形形色色的设计案例，它们的主要标签结构都是相同的。

利用flexbox技术，制作一个包含侦探小说的列表，列表内容包括该小说的封面和内容简介。

首先，我们写一个div结构，并给它挂载一个名为item的样式类名。在这个div内部，增加两个并列的div子元素，一个用来展示封面，一个用来展示内容简介。

 
   
 
        
   
 
   
 
       
The Scarlet Menace
 
   
 

根据在源码里的排列顺序，小说封面和内容简介，都将呈现自然的垂直排列状态，即一个在另外一个的上面。我们可以轻松地改变这个自然状态，通过设置item元素，将其转变为一个弹性容器。flex是一个新的display属性值，目前它的值包括block、inline、inline-block、none和table等。

.item { 
display : flex; }

flex将item设置为弹性容器，但是并没有移除它的block属性, 所以这个div结构继续占据其父元素的可用空间。

像所有的块级元素一样，item项将占满其父元素的一整行空间，除非我们做了特别设置。

当不需要item元素占满一行，或者想在弹性容器中增加内联元素的时候，我们可以按照如下方式设置。

.item { 
display : inline-flex; }

观察第一个例子，我们会发现为item设置了display:flex后，小说封面和内容简介都不再是垂直显示的了。这是因为我们将父元素设置成了弹性容器，它的子元素默认就变成了弹性元素，并会自动沿主轴方向横向排列。flexbox布局的发明者，设置了很多类似的非常聪明的默认项；对于一些开发者来说，这将会是非常非常有用的。