CSS3佈局模式:伸縮佈局盒(Flexbox)

時間  2019-11-08
標籤 css3 css 佈局 模式 伸縮 flexbox 欄目 CSS 简体版
原文   原文鏈接

介紹

Flexbox(伸縮佈局盒) 是 CSS3 中一個新的佈局模式，爲了現代網絡中更爲複雜的網頁需求而設計。本文將介紹 Flexbox 語法的技術細節。瀏覽器的支持愈來愈快，因此當 Flexbox 被普遍支持並應用時你將會快人一步。若是你想知道它是什麼並是如何工做的，不妨仔細瞭解下吧！ css

爲何須要伸縮佈局盒(Flexbox)？

做者長期以來使用表格、浮動、行內塊元素和其餘 CSS 屬性來佈局網站內容。然而，這些並非爲複雜的頁面和網頁應用而設計的。不論是簡單的垂直居中，仍是靈活的網格佈局都很難靠一己之力輕易實現，所以成就了 CSS 網格框架。可是，若是真的須要那麼多項目來實現作這些事，爲何不讓它來的更簡單些呢？Flexbox 的目的就是改變這一切。 html

規範狀態和瀏覽器支持狀況

Flexbox 規範的相關工做已經進展了3年。不一樣的瀏覽器也實現了不一樣的實驗版本。在2012年9月，Flexbox 語法的第三個主要修訂版本進入到候選推薦階段。這意味着 W3C 認爲當前的語法是穩定的，並鼓勵瀏覽器開發商去實現它。 web

Flexbox 規範時間表： 算法

  • 2009年7月 工做草案 (display: box;)
  • 2011年3月 工做草案 (display: flexbox;)
  • 2011年11月 工做草案 (display: flexbox;)
  • 2012年3月 工做草案 (display: flexbox;)
  • 2012年6月 工做草案 (display: flex;)
  • 2012年9月 候選推薦 (display: flex;)

Flexbox 已經被瀏覽器快速支持。Chrome 22+, Opera 12.1+, 和 Opera Mobile 12.1+ 已經支持了本文中所描述的 Flexbox。Firefox 18 和 Blackberry 10 也很快就會實現。我推薦你們使用已經支持的瀏覽器來閱讀本文和查看例子。 瀏覽器

概念和術語

雖然如今咱們可使用 Flexbox 輕鬆建立佈局，而不會像之前那樣難以理解，但咱們仍然須要花一些時間去熟悉到底如何使用 Flexbox。新的術語和概念可能會是咱們使用 Flexbox 時的一個障礙，因此讓咱們先來了解如下它們。 網絡

Flexbox 由 伸縮容器 和 伸縮項目 組成。經過設置元素的 display 屬性爲flex或inline-flex能夠獲得一個伸縮容器。設置爲flex的容器被渲染爲一個塊級元素，而設置爲inline-flex的容器則渲染爲一個行內元素。 框架

這裏的示例建立了一個伸縮容器。 佈局

1234 
         
 
 
          .flex-container 
 
          { 

         



         
         
         
         

         

         
         
         
         
         

          
          
          
          
          

         
 
 
          display 
 
          : 
 
          - 
 
          webkit 
 
          - 
 
          flex 
 
          ; 

         



         
         
         
         

         

         
         
         
         
         

          
          
          
          
          

         
 
 
          display 
 
          : 
 
          flex 
 
          ; 

         



         
         
         
         

         

         
         
         
         
         

          
          
          
          
          

         
 
 
          }

view raw gistfile1.css   This Gist  brought to you by   GitHub.

 

1234 
         
 
 
          .flex-container 
 
          { 

         



         
         
         
         

         

         
         
         
         
         

          
          
          
          
          

         
 
 
          display 
 
          : 
 
          - 
 
          webkit 
 
          - 
 
          flex 
 
          ; 

         



         
         
         
         

         

         
         
         
         
         

          
          
          
          
          

         
 
 
          display 
 
          : 
 
          flex 
 
          ; 

         



         
         
         
         

         

         
         
         
         
         

          
          
          
          
          

         
 
 
          }

view raw gistfile1.css   This Gist  brought to you by   GitHub.

 

本文中全部的示例都會帶有相應的瀏覽器廠商前綴。 flex

伸縮容器中的每個子元素都是一個伸縮項目。伸縮項目能夠是任意數量的。伸縮容器外和伸縮項目內的一切元素都不受影響。簡單地說，Flexbox 定義了伸縮容器內伸縮項目該如何佈局。 網站

Flex Lines 伸縮行

伸縮項目沿着伸縮容器內的一個 伸縮行 定位。一般每一個伸縮容器只有一個伸縮行。

這個示例展現了2個項目在默認狀況下的定位：沿着一個水平伸縮行從左至右顯示。


Writing Modes 書寫模式

在你設計 Flexbox 時的有一個重要的部分是更改伸縮行的方向。默認狀況下，伸縮行和文本方向一致：從左至右，從上往下。

這是 W3C 關於一個名爲書寫模式的新特性工做草稿。書寫模式是一個新的方法，讓你能夠從右往左寫，甚至豎着寫，就像你知道的某些語言同樣。

書寫模式是一個正在進行的計劃，可是 Chrome 已經率先支持了directionCSS 屬性。若是咱們在上一個例子中設置方向爲rtl(從右往左) 那麼不只僅文字會從右往左書寫，並且 伸縮行也改變了方向，並更改了頁面的佈局。


這也許就是 Flexbox 爲何如此抽象難懂的地方。當你正在製做一個語言不肯定的頁面時你不能簡單的只是說「上」、「下」、「左」、「右」。

The Main Axis and the Cross Axis 主軸和側軸

爲了描述抽象的書寫模式，Flexbox 使用 主軸 和 側軸的概念。伸縮行跟隨主軸。側軸則垂直於主軸。

起點、終點和各軸的方向的名稱以下：

  • 主軸起點 Main Start
  • 主軸終點 Main End
  • 主軸方向 Main Direction (有時候也成爲伸縮流方向 Flow Direction)
  • 側軸起點 Cross Start
  • 側軸終點 Cross End
  • 側軸方向 Cross Direction

在繼續瞭解以前明白主軸和側軸是相當重要的。Flexbox 中的一切都和這些軸有關。在咱們全部的例子中，書寫模式都是從左至右，從上到下，可是你須要記住並非全部的 Flexbox 都是這樣的。

伸縮容器的屬性

flex-direction 伸縮流的方向

flex-direction容許你更改伸縮容器的主軸方向。flex-direction的默認值是row。該值表示伸縮項目根據書寫模式的方向佈局。再次提醒，默認是從左至右，從上到下。其餘的值以下：

  • row-reverse: 主軸起點和主軸終點交換。若是書寫模式是從左至右，伸縮項目則是從右往左顯示。
  • column: 主軸和側軸交換。若是書寫系統是垂直的，那麼伸縮項目也是垂直顯示的。
  • column-reverse: 和 column 同樣，可是方向相反。

讓咱們把前一個示例中的flex-direction改成column。


如今咱們的伸縮項目就是垂直顯示的了。

justify-content 主軸對齊

伸縮容器的justify-content屬性用於調整主軸上伸縮項目的位置。可能的值爲：

  • flex-start (默認)
  • flex-end
  • center
  • space-between
  • space-around

這裏咱們設置justify-content爲center讓伸縮項目在主軸上居中對齊：


flex-start,flex-end, 和center一看就懂。space-between和space-around則是分配伸縮項目之間空白空間的不一樣方法。這張規範中的圖示很好的解釋了一切：

align-items 側軸對齊

align-items是一個和justify-content相呼應的屬性。align-items調整伸縮項目在側軸上的定位方式。可能的值有：

  • flex-start (默認)
  • flex-end
  • center
  • baseline
  • stretch

這裏咱們設置align-items爲center讓伸縮項目在側軸上居中對齊：


和以前同樣，flex-start,flex-end, 和center的意義顯而易見。stretch也很簡單：它會將伸縮項目從側軸起點拉伸到側軸終點。baseline則是讓伸縮項目與它們的基線對齊。基線根據伸縮項目的內容計算獲得。下面這張來自W3C標準的圖例很好的解釋了這些屬性：

flex-wrap 伸縮行換行

目前爲止，每一個伸縮容器都有且只有一個伸縮行。使用flex-wrap你能夠爲伸縮容器建立多個伸縮行。這個屬性接受如下值：

  • nowrap (默認)
  • wrap
  • wrap-reverse

若是flex-wrap設置爲wrap，在一個伸縮行容不下全部伸縮項目時，伸縮項目會換行到一條新增的伸縮行上。新增的伸縮行根據側軸的方向添加。

咱們使用flex-wrap來看個例子：


wrap-reverse和 wrap 同樣，只是新的伸縮行會被添加到側軸的反方向上。

align-content 堆棧伸縮行

align-content會更改flex-wrap的行爲。它和align-items類似，可是不是對齊伸縮項目，它對齊的是伸縮行。可能你已經想到了，它接受的值也很類似：

  • stretch (默認)
  • flex-start
  • flex-end
  • center
  • space-between
  • space-around

這些值與justify-content和align-items中的值同樣。

在這個例子中，咱們設置align-content爲center：


flex-flow 伸縮方向與換行

flex-flow是flex-direction和flex-wrap的縮寫。

flex-flow: [flex-direction] [flex-wrap]

舉個例子：

1234 
         
 
 
          .flex-container 
 
          { 

         



         
         
         
         

         

         
         
         
         
         

          
          
          
          
          

         
 
 
          - 
 
          webkit 
 
          - 
 
          flex 
 
          - 
 
          flow 
 
          : 
 
          column 
 
          nowrap 
 
          ; 

         



         
         
         
         

         

         
         
         
         
         

          
          
          
          
          

         
 
 
          flex 
 
          - 
 
          flow 
 
          : 
 
          column 
 
          nowrap 
 
          ; 

         



         
         
         
         

         

         
         
         
         
         

          
          
          
          
          

         
 
 
          }

view raw gistfile1.css This Gist  brought to you by GitHub .

1234 
         
 
 
          .flex-container 
 
          { 

         



         
         
         
         

         

         
         
         
         
         

          
          
          
          
          

         
 
 
          - 
 
          webkit 
 
          - 
 
          flex 
 
          - 
 
          flow 
 
          : 
 
          column 
 
          nowrap 
 
          ; 

         



         
         
         
         

         

         
         
         
         
         

          
          
          
          
          

         
 
 
          flex 
 
          - 
 
          flow 
 
          : 
 
          column 
 
          nowrap 
 
          ; 

         



         
         
         
         

         

         
         
         
         
         

          
          
          
          
          

         
 
 
          }

view raw gistfile1.css This Gist  brought to you by GitHub .

伸縮項目的屬性

一個伸縮項目是一個伸縮容器的子元素。伸縮容器中的文本也被視爲一個伸縮項目。

伸縮項目中內容與普通流同樣。舉例來講，當一個伸縮項目被設置爲浮動，你依然能夠在這個伸縮項目中放置一個浮動元素。

伸縮項目都有一個 主軸長度(Main Size) 和一個 側軸長度(Cross Size)。主軸長度是伸縮項目在主軸上的尺寸。側軸長度是伸縮項目在側軸上的尺寸。或者說，一個伸縮項目的寬或高取決於伸縮容器的軸，可能就是它的主軸長度或側軸長度。

下面的屬性能夠調整伸縮項目的行爲：

order 顯示順序

order是最簡單明瞭的屬性。設置伸縮項目的 order 能夠調整它們渲染時的順序。在這個例子中，咱們設置其中一個伸縮項目的order爲 -1，因而它被提早到了其餘伸縮項目的最前面。


若是須要文檔順序和顯示順序不一樣時，這就是個頗有用的功能了。

margin 外邊距

你應該對margin: auto;的這種用法很熟悉。在伸縮盒中，它也能作一樣的事情，可是更增強大。一個 "auto" 的 margin 會合並剩餘的空間。它能夠用來把伸縮項目擠到其餘位置。

這裏咱們在第一個伸縮項目上聲明瞭margin-right: auto;，致使了全部的剩餘空間被合併到那個元素的右邊去了：


這裏咱們使用margin: auto;來重現經典CSS佈局中的聖盃：真·垂直居中：


align-self 側軸對齊

伸縮項目的align-self屬性會覆蓋該項目的伸縮容器的align-items屬性。它的值和align-items同樣：

  • stretch (默認)
  • flex-start
  • flex-end
  • center
  • baseline

在這個例子中咱們爲每一個伸縮項目應用了不一樣的align-self值：


我在例子中包含了2個基線對齊的伸縮項目，由於它們的對齊須要互相做用。

flex 伸縮性

如今咱們終於要開始設置伸縮盒的伸縮性了。flex指定了一個伸縮項目該如何分配主軸上的剩餘空間。

讓咱們一次把全部的常見值都看一遍吧。

flex: [number]

這個語法指定了一個數字，表明了這個伸縮項目該佔用的剩餘空間比例。

在這個例子中，第一個伸縮項目佔用了 2/4 的剩餘空間，而另外兩個各佔用了 1/4 的剩餘空間。


若是把每一個伸縮項目都設置爲 1 的話，那麼剩餘空間就會被平均分配了。


flex: initial

一個flex屬性值被設爲initial的伸縮項目，在有剩餘空間的狀況下不會有任何變化，可是在必要的狀況下會被收縮。

flex: auto

一個flex屬性值被設爲auto的伸縮項目，會根據主軸自動伸縮以佔用全部剩餘空間。

auto目前僅在 Opera 12.11 尚有效，在 Chrome 23.0.1271.95 上無效。你能夠經過使用flex: 1;來達到同樣的效果。

flex: none

一個flex屬性值被設爲none的伸縮項目，在任何狀況都不會發生伸縮。

flex 縮寫

flex也能夠把flex-grow,flex-shrink, 和flex-basis這3個縮寫爲1個聲明：

flex: [flex-grow] [flex-shrink] [flex-basis]

大多數狀況下不必使用這種語法。另外，它須要一個更容易理解的伸縮算法。若是你以爲本身挺厲害的，到規範裏看一下吧。

固然你也能夠將flex-grow,flex-shrink, 和flex-basis做爲單個屬性分開來設置。但我強烈反對這種方式：當使用flex縮寫時，即便沒有某些值沒有設置也能得到更合理的默認值。

visibility 疊加項目

當該值生效時，應用visibility: collapse;和visibility: hidden;與display: none;的效果是不同的。若是是collapse，該元素會影響伸縮容器的側軸長度，但不會被現實或佔用主軸的空間。若是你想動態添加或移除伸縮項目又不會影響伸縮容器的側軸長度，這將會很是有用。

目前爲止，visibility: collapse;尚未被讓任何瀏覽器正確的實現。如今visibility: collapse;還和visibility: hidden;實現着同樣的效果。我但願能儘快獲得改觀。

你能夠在 這裏 看到collapse應該是如何工做的。

總結

如你所見，伸縮佈局盒(Flexbox) 是一個強大的新型佈局模式，將會給網站帶來革命性的佈局方法，但它也須要一種全新的思考方式。但願這篇文章能爲你使用伸縮佈局盒構建網站帶來幫助。我不知道你怎麼想，可是在我看來將來是美好的。

原文：Dive into Flexbox (http://weblog.bocoup.com/dive-into-flexbox)
參考資料：Css3-flexbox (http://www.w3.org/html/ig/zh/wiki/Css3-flexbox)

轉自：[譯]深刻了解 Flexbox 伸縮盒模型：http://c7sky.com/dive-into-flexbox.html

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程