CSS3 (伸縮盒)Flexbox屬性

Flexbox佈局官方稱之爲CSS Flexible Box佈局模塊,他是CSS3中的一種新的佈局模式。Flexbox能夠控制未知容器元素的對齊方式，排列方向，排列順序等，甚至是在未知大小的容器也能這樣作。Flex容器的主要特色是可以修改其子元素（Flex item）的寬度或高度，使其在不一樣的屏幕尺寸中填補可用的空間。

許多設計人員和開發人員發現使用Flexbox來佈局更容易，能夠使用更少的代碼，更簡單的方式實現更復雜的佈局，也使整個開發過程更爲簡單。Flexbox佈局算法基於水平或垂直的塊或行內元素來佈局。Flexbox佈局經常使用於小的應用程序組件之中，而CSS Grid佈局模塊將應用於大規模的佈局之中。

接下來的內容，將使用圖解方式向你們闡述flex屬性是如何工做，又是如何影響佈局方式。

基礎知識

在介紹flexbox屬性以前，先簡單介紹flexbox模塊。Flex佈局主要有父容器和它的直接子元素組成，其中父容器被稱之爲flex容器，而其直接的子元素稱做爲flex項目。

上圖你能夠看到Flexbox的屬性以及描述flex容器和flex項目的術語。若是你想了解有關這方面更詳細的信息，能夠閱讀W3C官方中有關於Flexbox模塊的相關資料。

從2009年提供的最初草案開始，Flexbox佈局經歷了屢次的迭代和幾個語法版本的變動。爲了不混淆，咱們這裏介紹的相關語法都只使用了2014年9月份提供的最新工做草案。若是你須要維護舊的瀏覽器兼容性，你能夠仔細閱讀這篇文章。

如何讓flexbox兼容舊的瀏覽器兼容性相關的中文文章，能夠閱讀這篇文章。

瀏覽器對最新flexbox規範的支持狀況：

• Chrome 29+
• Firefox 28+
• Internet Explorer 11+
• Opera 17+
• Safari 6.1+ (prefixed with -webkit-)
• Android 4.4+
• iOS 7.1+ (prefixed with -webkit-)

有關於更詳細的兼容性，能夠閱讀下表：

結過實戰，flexbox相關屬性在移動端運用中，對2009年的語法規範支持度較強，而最新語法部分屬性在移動端支持較差。若是要在移動端使用此屬性，建議使用2009年語法版本。

使用方法

使用Flexbox佈局只要在父容器元素上設置display屬性：

.flex-container { display: -webkit-flex; /* Safari */ display: flex; }

若是你想將其設置爲一個內聯元素時，能夠像下面這樣使用：

.flex-container { display: -webkit-inline-flex; /* Safari */ display: inline-flex; }

注意：這屬性只要設置在父容器上，其全部子元素將自動成爲Flex項目。

有幾tkih方法能夠將flexbox屬性分紅組，到目爲止，我發現瞭解flexbox屬性項最簡單的方法是將flexbox屬性分紅兩個組：flex容器和flex項目。下面咱們將分組來解釋他們是如何影響佈局。

flex容器屬性

flex-direction

這個屬性主要設置flex容器的主軸方向，指定flex項目在flex容器中的排列方式。flex容器的主軸方向主要有水平和縱向兩種。

屬性值：

.flex-container { -webkit-flex-direction: row; /* Safari */ flex-direction: row; }

flex項目在ltr上下文中從左向右排在一行：

.flex-container { -webkit-flex-direction: row-reverse; /* Safari */ flex-direction: row-reverse; }

flex項目在rtl上下文中從右向左排在一行：

.flex-container { -webkit-flex-direction: column; /* Safari */ flex-direction: column; }

flex項目從上到下排在一列中：

.flex-container { -webkit-flex-direction: column-reverse; /* Safari */ flex-direction: column-reverse; }

flex項目從下到上排在一列中：

其默認值爲：row

注意：row和row-reverse依賴其寫做模式，若是在rtl上下文方式下，他們都將分別被逆轉。

flex-wrap

flex項目在flex容器中默認是隻顯示一行。若是但願控制flex項目在flex容器中按一行或多行排列，能夠使用flex-wrap屬性。

屬性值：

.flex-container { -webkit-flex-wrap: nowrap; /* Safari */ flex-wrap: nowrap; }

Flex項目在flex容器中顯示成一行，flex項目什麼自動縮減來適應flex容器的寬度。

.flex-container { -webkit-flex-wrap: wrap; /* Safari */ flex-wrap: wrap; }

Flex項目從左到右和從上到下在flex容器中多行顯示。

.flex-container { -webkit-flex-wrap: wrap-reverse; /* Safari */ flex-wrap: wrap-reverse; }

Flex項目從左到右和從下到上在flex容器中多行顯示：

默認值：nowrap

注意： 這些屬性依賴於寫做模式，在rtl上下文背景這，他們將分別被逆轉。

flex-flow

這個屬性是flex-direction和flex-wrap屬性的簡寫。

屬性值：

.flex-container {
  -webkit-flex-flow: <flex-direction> || <flex-wrap>; /* Safari */ flex-flow: <flex-direction> || <flex-wrap>; } 

默認值：row nowrap

justify-content

justify-content屬性用來指定flex項目在flex容器沿着主軸在當前行的對齊方式。

屬性值：

.flex-container { -webkit-justify-content: flex-start; /* Safari */ justify-content: flex-start; }

在ltr上下文方式下，flex項目向flex容器的左邊靠齊。

.flex-container { -webkit-justify-content: flex-end; /* Safari */ justify-content: flex-end; }

在ltr上下文方式下，flex項目向flex容器的右邊靠齊。

.flex-container { -webkit-justify-content: center; /* Safari */ justify-content: center; }

Flex項目在flex容器中居中對齊。

.flex-container { -webkit-justify-content: space-between; /* Safari */ justify-content: space-between; }

Flex項目之間間距相對，第一個和最後一個flex項目向flex容器的邊緣對齊。

.flex-container { -webkit-justify-content: space-around; /* Safari */ justify-content: space-around; }

Flex項目先後相等的空間顯示在flex容器中。

第一個Flex項目左邊的間距和最後一個Flex項目右邊的間距是其餘相相鄰flex項目之間間的一半。

默認值：flex-start

align-items

Flex項目在容器側軸對齊方式，相似於justify-content，只不過不是水平方向，而是縱向。這個屬性能夠設置全部flex項目對齊方式，而且包括匿名元素。

屬性值:

.flex-container { -webkit-align-items: stretch; /* Safari */ align-items: stretch; }

Flex項目沿着flex容器側軸方向填滿整個flex容器高度（或寬度）

.flex-container { -webkit-align-items: flex-start; /* Safari */ align-items: flex-start; }

Flex項目排列在flex容器側軸開始處。

.flex-container { -webkit-align-items: flex-end; /* Safari */ align-items: flex-end; }

Flex項目排列在flex容器側軸結束處。

.flex-container { -webkit-align-items: center; /* Safari */ align-items: center; }

Flex項目排列在flex容器側軸中間處

.flex-container { -webkit-align-items: baseline; /* Safari */ align-items: baseline; }

Flex項目按文本基線在flex容器側軸中排列。

默認值：stretch

注意：有關於基線對齊方式更多細節能夠點擊這裏。

align-content

align-content屬性將flex容器內的行在flex容器中側軸排列方式，相似於justify-content在主軸方向的單個Flex項目對齊方式。

Flex項目在flex容器中多行顯示行，其多行在flex容器的側軸方向對齊方式。

屬性值：

.flex-container { -webkit-align-content: stretch; /* Safari */ align-content: stretch; }

Flex項目行在flex容器側軸按分佈式空間排列，

.flex-container { -webkit-align-content: flex-start; /* Safari */ align-content: flex-start; }

Flex項目在flex容器側軸開始處排列。

.flex-container { -webkit-align-content: flex-end; /* Safari */ align-content: flex-end; }

Flex項目在flex容器側軸末尾處排列。

.flex-container { -webkit-align-content: center; /* Safari */ align-content: center; }

Flex項目行沿flex容器側軸中間排列。

.flex-container { -webkit-align-content: space-between; /* Safari */ align-content: space-between; }

Flex項目行與行之間間距相等，而且flex項目行第一行排在flex容器側軸開始之處，flex項目行最後一行排在flex容器側軸末尾之處。

.flex-container { -webkit-align-content: space-around; /* Safari */ align-content: space-around; }

Flex項目行的上下間距相等，而且沿flex容器側軸排列。

Flex項目行上下間距相等，而且flex容器第一行距flex容器側軸開始處間距是flex項目行與行之間間距一半。同時項目行最後一行距flex容器側軸末尾處間距是flex項目行與行之間間距一半。

默認值：stretch

注意：這個屬性只有當flex容器有多行flex項目時才生效，若是flex容器只有一行flex項目，這個屬性沒有效果。

flex容器無效屬性

• 全部column-*屬性在flex容器上都不生效
• flex容器上不能使用::first-line和::first-letter僞元素

Flex項目屬性

order

order屬性是用來控制flex容器中flex項目的排列順序。默認狀況flex項目在flex容器的順序是flex項目出現的順序。

屬性值：

.flex-item {
  -webkit-order: <integer>; /* Safari */ order: <integer>; } 

Flex項目能夠使用這個簡單的屬性得新排序，而不須要從新修改HTML代碼。

默認值： 0

flex-grow

這個屬性用來指定 flex項目的放大比例，其決定了flex項目相對flex容器自由空間進行放大。

屬性值：

.flex-item {
  -webkit-flex-grow: <number>; /* Safari */ flex-grow: <number>; } 

若是全部flex項目的flex-grow值相同，那麼flex項目在flex容器中具備相同的尺寸。

第二個flex項目相對於其餘的flex項目佔有更多的空間。

默認值： 0

注意：負數無效。

flex-shrink

flex-shrink屬性用來指定flex項目縮小比例。決定了flex項目將會相對於其餘flex項目在flex容器空間不足之下自動收縮。

屬性值：

.flex-item {
  -webkit-flex-shrink: <number>; /* Safari */ flex-shrink: <number>; } 

默認狀況之下，全部flex項目均可以收縮，但若是將它們設置爲0時，他們不會縮小會保持原來的大小。

默認值：0

注意：負數無效。

flex-basis

這個屬性和width和height屬性相同，用來指定flex項目的大小。

屬性值：

.flex-item {
  -webkit-flex-basis: auto | <width>; /* Safari */ flex-basis: auto | <width>; } 

flex-basis指定了第四個flex項目的初始尺寸。

默認值：auto

注意：取值爲auto時還有一個問題有待於未來解決。

flex

這個屬性是flex-grow、flex-shrink和flex-basis屬性的簡寫。其餘值能夠設置爲auto(1 1 auto)和non(0 0 auto)。

.flex-item {
  -webkit-flex: none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ]; /* Safari */ flex: none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ]; } 

默認值：0 1 auto

** 注意：*W3C鼓勵使用簡寫方式，而不是使用單獨的屬性，能夠使用簡寫重置不明組件一塊兒使用。

align-self

使用align-self屬性能夠指定flex項目自身的對齊方式或者使用align-items來指定單個flex項目。使用align-items對齊方式來解釋flex容器，能更好的理解他們的值。

屬性值：

.flex-item { -webkit-align-self: auto | flex-start | flex-end | center | baseline | stretch; /* Safari */ align-self: auto | flex-start | flex-end | center | baseline | stretch; }

第三個和第四個flex項目使用align-self屬性覆蓋了其默認的對齊方式。

默認值：auto

注意：align-self取值爲auto值時，flex項目對齊方式會根據其父元素align-items來決定。若是其元素設置爲stretch值時或沒有父元素時，align-self的值爲auto時將無對齊方式一說。

flex項目無效屬性

• float，clear和vertical-align屬性應用在flex項目上將會無效和沒法將其out-of-flow

我能夠點擊這裏全屏看這個DEMO，也能夠在Github上獲取源碼。

著做權歸做者全部。
商業轉載請聯繫做者得到受權,非商業轉載請註明出處。
原文: http://www.w3cplus.com/css3/a-visual-guide-to-css3-flexbox-properties.html © w3cplus.com著做權歸做者全部。
商業轉載請聯繫做者得到受權,非商業轉載請註明出處。
原文: http://www.w3cplus.com/css3/a-visual-guide-to-css3-flexbox-properties.html © w3cplus.com著做權歸做者全部。
商業轉載請聯繫做者得到受權,非商業轉載請註明出處。
原文: http://www.w3cplus.com/css3/a-visual-guide-to-css3-flexbox-properties.html © w3cplus.com