網(wǎng)頁布局即layout是css的一個重點(diǎn)應(yīng)用。

　　布局的傳統(tǒng)解決方案，基于盒狀模型，依賴 display 屬性 + position屬性 + float屬性。它對于那些特殊布局非常不方便，比如，垂直居中就不容易實(shí)現(xiàn)。

　　2009年，W3C 提出了一種新的方案----Flex 布局，可以簡便、完整、響應(yīng)式地實(shí)現(xiàn)各種頁面布局。目前，它已經(jīng)得到了所有瀏覽器的支持，這意味著，現(xiàn)在就能很安全地使用這項(xiàng)功能。

　　Flex 布局將成為未來布局的首選方案。本文介紹它的語法，一會再說下常見布局的 Flex 寫法。網(wǎng)友 JailBreak 為本文的所有示例制作了 Demo，也可以參考。

　　原文參考自：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

　　Flex 是 Flexible Box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。

任何一個容器都可以指定為Flex布局。 行內(nèi)元素也可以指定為Flex布局。 Webkit 內(nèi)核的瀏覽器，必須加上-webkit前綴。 將一個元素設(shè)置為Flex布局以后，子元素的float、clear和、vertical-align屬性將失效。 采用 Flex 布局的元素，稱為 Flex 容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為 Flex 項(xiàng)目（flex item），簡稱"項(xiàng)目"。

　　容器默認(rèn)存在兩根軸：水平的主軸和垂直的交叉軸。主軸的開始位置（與邊框的交叉點(diǎn)）叫做main start,結(jié)束位置叫做main end;交叉軸的開始位置叫做crose start,結(jié)束位置叫做 crose end。

　　項(xiàng)目默認(rèn)沿主軸排列，單個項(xiàng)目占據(jù)的主軸空間叫做 main size, 占據(jù)的交叉軸空間叫做crose start，結(jié)束位子叫做cross end;

　　以下 6 個屬性設(shè)置在容器上：

　　1：flex-dfirection 屬性決定主軸的方向（即項(xiàng)目的排序方向）。它可能有4個值。

　　? flex-direction:column-reverse;? --- 豎直從下向上排列? （豎直倒序排列）

　　　　

　　flex-direction: column;　　--豎直從上向下排列（順序排列） ? ? ? ? ? ? ??

　　　　flex-direction: row;??　　--水平順序排列（從左向右）

　　　　flex-direction: row-reverse;?　　--水平倒序排列（從右向左）

?

　　2：默認(rèn)情況下，項(xiàng)目都排在一條線（軸線）上。flex-warp屬性定義，如果軸線排不下，如何換行。

　　它可能取三個值。

　　　　a) nowrap (默認(rèn)) ：不換行。

　　　　b) wrap :換行，第一行在上方

　　　　c) wrap-reverse : 換行，第一行在下方。

　　　　flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認(rèn)值為row nowrap。

　　　　例 ： flex-flow : row nowrap;

　　3：justify-content 屬性定義了項(xiàng)目在主軸上的對齊方式。

　　　　fiex-start; 左對齊

　　　? fiex-end ; 右對齊

　　　? center : 水平居中

　　　? space-between :? 用于在flex內(nèi)的容器之間留有空白；分散排列

　　　? space-around ：?用于在flex內(nèi)的容器前后左右都留有空白；

　　

　　4: align-items 屬性定義項(xiàng)目在交叉軸上如何對齊。

　　flex-start :?元素位于容器的開頭位置。

　　flex-end : 元素位于容器的底部（結(jié)束位置）；

　　center : 垂直居中；

　　stretch : 拉伸所有子元素與容器同高

　　baseline : 元素位于容器的基線上。

?align-content屬性定義了多根軸線的對齊方式。如果項(xiàng)目只有一根軸線，該屬性不起作用。

該屬性可能取6個值。 以下6個屬性設(shè)置在項(xiàng)目上。 order屬性定義項(xiàng)目的排列順序。數(shù)值越小，排列越靠前，默認(rèn)為0。 flex-grow屬性定義項(xiàng)目的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大。 如果所有項(xiàng)目的flex-grow屬性都為1，則它們將等分剩余空間（如果有的話）。如果一個項(xiàng)目的flex-grow屬性為2，其他項(xiàng)目都為1，則前者占據(jù)的剩余空間將比其他項(xiàng)多一倍。 flex-shrink屬性定義了項(xiàng)目的縮小比例，默認(rèn)為1，即如果空間不足，該項(xiàng)目將縮小。 如果所有項(xiàng)目的flex-shrink屬性都為1，當(dāng)空間不足時，都將等比例縮小。如果一個項(xiàng)目的flex-shrink屬性為0，其他項(xiàng)目都為1，則空間不足時，前者不縮小。 負(fù)值對該屬性無效。 flex-basis屬性定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個屬性，計(jì)算主軸是否有多余空間。它的默認(rèn)值為auto，即項(xiàng)目的本來大小。 它可以設(shè)為跟width或height屬性一樣的值（比如350px），則項(xiàng)目將占據(jù)固定空間。 flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認(rèn)值為0 1 auto。后兩個屬性可選。 該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。 建議優(yōu)先使用這個屬性，而不是單獨(dú)寫三個分離的屬性，因?yàn)闉g覽器會推算相關(guān)值。 align-self屬性允許單個項(xiàng)目有與其他項(xiàng)目不一樣的對齊方式，可覆蓋align-items屬性。默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。 該屬性可能取6個值，除了auto，其他都與align-items屬性完全一致。 （完）

轉(zhuǎn)載于:https://www.cnblogs.com/yueguanguanyun/p/9620080.html

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的Felx布局基础教程的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。