Flex 語法篇 · Flexible Box 快速入門

> 該教程整理自 [阮一峰Flexible教程](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html) 網頁布局（layout）是CSS的一個重點應用。 ![](http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071001.gif) 布局的傳統解決方案，基于<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box_model" target="_blank">盒狀模型</a>，依賴 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display" target="_blank">display</a>屬性 + <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position" target="_blank">position</a>屬性 + <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/float" target="_blank">float</a>屬性。它對于那些特殊布局非常不方便，比如，<a href="https://css-tricks.com/centering-css-complete-guide/" target="_blank">垂直居中</a>就不容易實現。 <img src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071002.png" alt="" title=""> 2009年，W3C提出了一種新的方案----Flex布局，可以簡便、完整、響應式地實現各種頁面布局。目前，它已經得到了所有瀏覽器的支持，這意味著，現在就能很安全地使用這項功能。 <img src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071003.jpg" alt="" title=""> Flex布局將成為未來布局的首選方案。本文介紹它的語法。 以下內容主要參考了下面兩篇文章：<a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" target="_blank">A Complete Guide to Flexbox</a> 和 <a href="https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties" target="_blank">A Visual Guide to CSS3 Flexbox Properties</a>。 <h2>一、Flex布局是什么？</h2> Flex是Flexible Box的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。 任何一個容器都可以指定為Flex布局。 <pre class=" language-css"><code class=" language-css"> .box{ display: flex; } </code></pre> 行內元素也可以使用Flex布局。 <pre class=" language-css"><code class=" language-css"> .box{ display: inline-flex; } </code></pre> Webkit內核的瀏覽器，必須加上<code>-webkit</code>前綴。 <pre class=" language-css"><code class=" language-css"> .box{ display: -webkit-flex; /* Safari */ display: flex; } </code></pre> 注意，設為Flex布局以后，子元素的<code>float</code>、<code>clear</code>和<code>vertical-align</code>屬性將失效。 <h2>二、基本概念</h2> 采用Flex布局的元素，稱為Flex容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為Flex項目（flex item），簡稱"項目"。 <img src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071004.png" alt="" title=""> 容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做<code>main start</code>，結束位置叫做<code>main end</code>；交叉軸的開始位置叫做<code>cross start</code>，結束位置叫做<code>cross end</code>。 項目默認沿主軸排列。單個項目占據的主軸空間叫做<code>main size</code>，占據的交叉軸空間叫做<code>cross size</code>。 <h2>三、容器的屬性</h2> 以下6個屬性設置在容器上。 <blockquote> <ul> <li>flex-direction</li> <li>flex-wrap</li> <li>flex-flow</li> <li>justify-content</li> <li>align-items</li> <li>align-content</li> </ul> </blockquote> <h3>3.1 flex-direction屬性</h3> <code>flex-direction</code>屬性決定主軸的方向（即項目的排列方向）。 <pre class=" language-css"><code class=" language-css"> .box { flex-direction: row | row-reverse | column | column-reverse; } </code></pre> <img src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071005.png" alt="" title=""> 它可能有4個值。 <blockquote> <ul> <li><code>row</code>（默認值）：主軸為水平方向，起點在左端。</li> <li><code>row-reverse</code>：主軸為水平方向，起點在右端。</li> <li><code>column</code>：主軸為垂直方向，起點在上沿。</li> <li><code>column-reverse</code>：主軸為垂直方向，起點在下沿。</li> </ul> </blockquote> <h3>3.2 flex-wrap屬性</h3> 默認情況下，項目都排在一條線（又稱"軸線"）上。<code>flex-wrap</code>屬性定義，如果一條軸線排不下，如何換行。 <img src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071006.png" alt="" title=""> <pre class=" language-css"><code class=" language-css"> .box{ flex-wrap: nowrap | wrap | wrap-reverse; } </code></pre> 它可能取三個值。 （1）<code>nowrap</code>（默認）：不換行。 <img src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071007.png" alt="" title=""> （2）<code>wrap</code>：換行，第一行在上方。 <img src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071008.jpg" alt="" title=""> （3）<code>wrap-reverse</code>：換行，第一行在下方。 <img src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071009.jpg" alt="" title=""> <h3>3.3 flex-flow</h3> <code>flex-flow</code>屬性是<code>flex-direction</code>屬性和<code>flex-wrap</code>屬性的簡寫形式，默認值為<code>row nowrap</code>。 <pre class=" language-css"><code class=" language-css"> .box { flex-flow: <flex-direction> || <flex-wrap>; } </code></pre> <h3>3.4 justify-content屬性</h3> <code>justify-content</code>屬性定義了項目在主軸上的對齊方式。 <pre class=" language-css"><code class=" language-css"> .box { justify-content: flex-start | flex-end | center | space-between | space-around; } </code></pre> <img src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071010.png" alt="" title=""> 它可能取5個值，具體對齊方式與軸的方向有關。下面假設主軸為從左到右。 <blockquote> <ul> <li><code>flex-start</code>（默認值）：左對齊</li> <li><code>flex-end</code>：右對齊</li> <li><code>center</code>：居中</li> <li><code>space-between</code>：兩端對齊，項目之間的間隔都相等。</li> <li><code>space-around</code>：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。</li> </ul> </blockquote> <h3>3.5 align-items屬性</h3> <code>align-items</code>屬性定義項目在交叉軸上如何對齊。 <pre class=" language-css"><code class=" language-css"> .box { align-items: flex-start | flex-end | center | baseline | stretch; } </code></pre> <img src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071011.png" alt="" title=""> 它可能取5個值。具體的對齊方式與交叉軸的方向有關，下面假設交叉軸從上到下。 <blockquote> <ul> <li><code>flex-start</code>：交叉軸的起點對齊。</li> <li><code>flex-end</code>：交叉軸的終點對齊。</li> <li><code>center</code>：交叉軸的中點對齊。</li> <li><code>baseline</code>: 項目的第一行文字的基線對齊。</li> <li><code>stretch</code>（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。</li> </ul> </blockquote> <h3>3.6 align-content屬性</h3> <code>align-content</code>屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。 <pre class=" language-css"><code class=" language-css"> .box { align-content: flex-start | flex-end | center | space-between | space-around | stretch; } </code></pre> <img src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071012.png" alt="" title=""> 該屬性可能取6個值。 <blockquote> <ul> <li><code>flex-start</code>：與交叉軸的起點對齊。</li> <li><code>flex-end</code>：與交叉軸的終點對齊。</li> <li><code>center</code>：與交叉軸的中點對齊。</li> <li><code>space-between</code>：與交叉軸兩端對齊，軸線之間的間隔平均分布。</li> <li><code>space-around</code>：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。</li> <li><code>stretch</code>（默認值）：軸線占滿整個交叉軸。</li> </ul> </blockquote> <h3>四、項目的屬性</h3> 以下6個屬性設置在項目上。 <blockquote> <ul> <li><code>order</code></li> <li><code>flex-grow</code></li> <li><code>flex-shrink</code></li> <li><code>flex-basis</code></li> <li><code>flex</code></li> <li><code>align-self</code></li> </ul> </blockquote> <h3>4.1 order屬性</h3> <code>order</code>屬性定義項目的排列順序。數值越小，排列越靠前，默認為0。 <pre class=" language-css"><code class=" language-css"> .item { order: <integer>; } </code></pre> <img src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071013.png" alt="" title=""> <h3>4.2 flex-grow屬性</h3> <code>flex-grow</code>屬性定義項目的放大比例，默認為<code>0</code>，即如果存在剩余空間，也不放大。 <pre class=" language-css"><code class=" language-css"> .item { flex-grow: <number>; /* default 0 */ } </code></pre> <img src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071014.png" alt="" title=""> 如果所有項目的<code>flex-grow</code>屬性都為1，則它們將等分剩余空間（如果有的話）。如果一個項目的<code>flex-grow</code>屬性為2，其他項目都為1，則前者占據的剩余空間將比其他項多一倍。 <h3>4.3 flex-shrink屬性</h3> <code>flex-shrink</code>屬性定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。 <pre class=" language-css"><code class=" language-css"> .item { flex-shrink: <number>; /* default 1 */ } </code></pre> <img src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071015.jpg" alt="" title=""> 如果所有項目的<code>flex-shrink</code>屬性都為1，當空間不足時，都將等比例縮小。如果一個項目的<code>flex-shrink</code>屬性為0，其他項目都為1，則空間不足時，前者不縮小。 負值對該屬性無效。 <h3>4.4 flex-basis屬性</h3> <code>flex-basis</code>屬性定義了在分配多余空間之前，項目占據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多余空間。它的默認值為<code>auto</code>，即項目的本來大小。 <pre class=" language-css"><code class=" language-css"> .item { flex-basis: <length> | auto; /* default auto */ } </code></pre> 它可以設為跟<code>width</code>或<code>height</code>屬性一樣的值（比如350px），則項目將占據固定空間。 <h3>4.5 flex屬性</h3> <code>flex</code>屬性是<code>flex-grow</code>, <code>flex-shrink</code> 和 <code>flex-basis</code>的簡寫，默認值為<code>0 1 auto</code>。后兩個屬性可選。 <pre class=" language-css"><code class=" language-css"> .item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] } </code></pre> 該屬性有兩個快捷值：<code>auto</code> (<code>1 1 auto</code>) 和 none (<code>0 0 auto</code>)。 建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值。 <h3>4.6 align-self屬性</h3> <code>align-self</code>屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋<code>align-items</code>屬性。默認值為<code>auto</code>，表示繼承父元素的<code>align-items</code>屬性，如果沒有父元素，則等同于<code>stretch</code>。 <pre class=" language-css"><code class=" language-css"> .item { align-self: auto | flex-start | flex-end | center | baseline | stretch; } </code></pre> <img src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071016.png" alt="" title=""> 該屬性可能取6個值，除了auto，其他都與align-items屬性完全一致。 （完）