三分钟学会css3中的flexbox布局

   <p>这篇文章里我们将学习CSS里flexbox布局的几个最重要的概念，通过学习flexbox布局，你会发现以往遇到的所有的关于布局的问题，现在都可以轻松解决了。</p>    <p>我们将只关注几个核心概念，等这些核心知识掌握之后，你可以再慢慢的学习那些不重要的相关知识。</p>    <h3><strong>1. 容器和容器里的元素</strong></h3>    <p>flexbox布局的两个最重要的概念是 <strong>容器</strong> (蓝色)和容器里的 <strong>子元素</strong> (红色)。在本文的例子中， <strong>容器</strong> 和它的 <strong>子元素</strong> 都是 div 。</p>    <p><strong>横向布局</strong></p>    <p>为了实现flex布局，我们需要在 <strong>容器</strong> 的CSS里添加如下代码：</p>    <pre>  <code class="language-css">.container {      display: flex;  }</code></pre>    <p>效果如下：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/26322253ecee01375930c8464941579e.png"></p>    <p>对于容器里面的子元素，我们什么都不需要做。它们会自动的按横坐标一字排开。</p>    <p><strong>纵向布局</strong></p>    <p>在上面的演示中，缺省排列是沿着横坐标方向的，还有一个方向是纵坐标，这个坐标轴的概念在理解flex布局中非常重要。</p>    <p>当我们在 <strong>容器</strong> 的CSS里添加 <em>flex-direction</em> : <em>column.</em> 后， <strong>子元素</strong> 的排列方向就会发生变化。</p>    <pre>  <code class="language-css">.container {      display: flex;      flex-direction: column;  }</code></pre>    <p style="text-align:center"><img src="https://simg.open-open.com/show/f320e43e472a6e9cfb2a97a1b951de2a.png"></p>    <p>现在，子元素的排列方向是沿着纵坐标的方向了。</p>    <h3><strong>2. 调整子元素的对齐方式</strong></h3>    <p>现在我们让子元素重新横向布局，这需要将 <em>flex-direction</em> 属性的值从 <strong>column</strong> 改成 <strong>row,</strong> 子元素就会重新回到横向布局。</p>    <p>调整子元素的对齐方式，我需要使用 <em>justify-content</em> 和 <em>align-items</em> 这两个属性，它们控制着子元素的在横向和纵向两方面的定位和对齐方式。</p>    <p>下面我们将要使用 <strong>justify-content</strong> 属性让所有子元素都居中对齐：</p>    <pre>  <code class="language-css">.container {      display: flex;      flex-direction: row;      justify-content: center;  }</code></pre>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/7830368bc90cb5d8aaf93744b05265dc.png"></p>    <p>使用 <em>align-items</em> 属性来控制子元素的竖向对齐方式：</p>    <pre>  <code class="language-css">.container {      display: flex;      flex-direction: row;      justify-content: center;      align-items: center;  }</code></pre>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/b24257490f9859eda5cef0f9f17983b4.png"></p>    <p>下面的列表中显示了 <em>justify-content</em> 和 <em>align-items</em> 属性可以使用的属性值：</p>    <p><strong>justify-content:</strong></p>    <ul>     <li>flex-start ( <strong>default</strong> )</li>     <li>flex-end</li>     <li>center</li>     <li>space-between</li>     <li>space-around</li>    </ul>    <p><strong>align-items:</strong></p>    <ul>     <li>flex-start <strong>(default)</strong></li>     <li>flex-end</li>     <li>center</li>     <li>baseline</li>     <li>stretch</li>    </ul>    <p>建议大家将 <em>justify-content</em> 、 <em>align-items</em> 和 <em>flex-direction</em> 几个属性混合使用，相互配合，看看都会达到什么样的布局效果。这样你才能正确的理解flexbox布局的布局方式。</p>    <h3><strong>3. 子元素</strong></h3>    <p>最后，我们将学习针对 <strong>子元素</strong> 的一些应对flexbox布局的CSS属性。</p>    <p>比如我们想调整第一个子元素的位置，我们可以给他添加CSS属性 <em>align-self</em> ，这个属性的属性值是和 <em>align-items</em> 是一样的用法:</p>    <pre>  <code class="language-css">.item1 {    align-self: flex-end;  }</code></pre>    <p>效果是下面这样：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/42ce5c4127811305e9c4e2a41f38c109.png"></p>    <p>是不是很神奇企且简单！</p>    <p>关于flexbox布局的知识远比本文介绍的这些要丰富，这总重要的几个知识点就是这些，掌握了它们，再学些其他的用法就容易多了。</p>    <p> </p>    <p>来自：http://www.webhek.com/css-flexbox-layout</p>    <p> </p>