text.html

 
<p class="zw">为了帮助理解<code>flex-grow</code>概念，以及如何通过使用各种HTML元素来构建弹性布局，巩固所学知识，我们将会对一组被<code>figure</code>元素包裹的图片和图释做响应式布局。这是一个仅用几行代码实现的理想flexbox布局，它的形式在互联网上比较少见，但却是传统报纸和杂志里随处可见的布局。构成它的HTML标签没有什么特别的。</p> 
<pre class="代码无行号"><code><figure class="figure--horizontal"> 
   <img src="hardboiled.jpg" alt=""> 
   <figcaption>Pulp magazines were inexpensive fiction magazines
published until the '50s.</figcaption> 
</figure></code></pre> 
<p class="zw">如果我们什么都不做，那么<code>figcaption</code>元素默认在图片下面显示，但是我们可以让它更好看些。在大屏设备上，我们首先将<code>figure</code>元素的<code>display</code>属性设置为<code>flex</code>，将其设置为弹性容器。它的默认值是<code>row</code>和<code>nowrap</code>，我们无需定义默认值。</p> 
<pre class="代码无行号"><code>@media (min-width: 48rem) { 
.figure--horizontal { 
display : flex; } 
}</code></pre> 
<p class="zw">这组图片和图注现在已经变成了弹性元素，按照默认的主轴排列分布。到目前为止看起来还不错，由于图片元素在源代码里是第一个，所以它在浏览器中会显示在左侧，因为<code>flex-direction</code>的默认值是<code>row</code>，而<code>figcaption</code>元素会作为第二个，显在右侧。</p> 
<p class="zw">我想让图片的宽度是图释部分的四倍，所以我们给图片添加<code>flex-grow</code>，值为<code>4</code>，而给图释部分设置值为<code>1</code>。</p> 
<pre class="代码无行号"><code>@media (min-width: 48rem) { 

.figure--horizontal img { 
flex : 4;} 

.figure--horizontal figcaption { 
flex : 1; } 
}</code></pre> 
<p class="图"><img alt="1116.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/92.jpg"></p> 
<p class="图题">让图片和图释按照主轴方向排列，并且按特定比例扩展或者缩放自身宽度，形成一个良好的布局，这比起传统的浮动要简单得多。</p> 
<p class="zw">如果我们想做一点点变化，改变图片和图释的展示顺序，该怎么办？无需改变HTML源代码，只需要改变<code>flex-direction</code>的默认值，即把<code>row</code>改为<code>row-reverse</code>。</p> 
<pre class="代码无行号"><code>@media (min-width: 48rem) { 
.figure--horizontal-reverse { 
flex-direction : row-reverse; } 
}</code></pre> 
<p class="图"><img alt="1117.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/93.jpg"></p> 
<p class="图题">无需改变HTML源代码，就能改变元素展示顺序。</p>