<p class="zw">每当谈起弹性布局，我希望你都能回想起这里我所介绍的内容，那就是，元素依靠着主轴、侧轴或者两者都有来布局。依靠浮动效果是做不到这一点的。到目前为止，我们只使用了主轴来布局，下面我们将使用 <code>align-items</code>属性进行侧轴布局。</p> <pre class="代码无行号"><code>.item { align-items : stretch; }</code></pre> <p class="zw">我们不需要经常来显示声明，因为<code>stretch</code>是默认值。</p> <p class="图"><img alt="" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/123.jpg"></p> <p class="图题">沿着侧轴伸展，是flexbox最有用的特性之一。</p> <p class="zw"><code>align-items</code>和<code>justify-content</code>概念类似。<code>justify-content</code>让内容在主轴上排列，而<code>align-items</code>让内容在侧轴上排列。弹性盒子有四个非常有用的属性。<code>flex-start</code>让元素从元素的开头开始排列；<code>flex-direction</code>定义了哪个是主轴。当<code>flex-direction</code>设置为<code>row</code>的时候，侧轴的起点就位于面板顶部；当设置为<code>column</code>时，侧轴的起点就位于面板左侧。</p> <p class="图"><img alt="" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/124.jpg"></p> <p class="图"><img alt="" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/125.jpg"></p> <p class="图题">要实现这样的布局效果，元素要按照侧轴的结尾布局，这可能是很多设计者期待了很多年的东西。</p> <p class="zw">当我们指定元素向中心<code>center</code>对齐，它们可能在垂直方向上居中对齐。然后结合<code>justify-content:center</code>，这样我们就能使元素水平垂直居中对齐了。这比之前的布局要简单得多。</p>
