關于FlexBox的布局

?

基本要素

因為FlexBox是一整個模塊并不是一個單獨的屬性，它涉及到很多東西包括它的所有設置屬性。一些屬性是需要被設置在容器（父級元素，稱為『彈性容器』），而一些其他的屬性需要被設置在子元素（稱為『彈性項』）中。

如果常規布局是基于塊布局與內聯布局的方向流的，那么彈性布局就是基于“flex-flow流”。請看一下來自W3C規范的這張圖，它解釋了彈性布局的主要思想。

基本上，彈性項（flex item）會沿著主軸方向（main-start到main-end）或側軸方向(cross-start到cross-end)排列。

• 主軸（main axis） - 彈性項主要是沿著彈性容器的主軸進行排列的。要注意一點，他不一定是水平的；這主要還是看flex-direction屬性（見下文）。
• main-start | main-end?- 彈性項將由main-start到main-end方向放置在容器內。
• main size?- 彈性項在主軸方向的寬度或高度就是主軸的尺寸。彈性項主要的大小屬性可以是寬度，也可以是高度屬性，由哪一個對著主軸方向決定。
• cross axis?- 與主軸垂直相交的軸線就是側軸。它的方向由主軸決定。
• cross-start | cross-end?- 彈性行是由彈性項填充起來的，它的配置是從容器的cross-start開始，往cross-end結束。
• cross size?- 彈性項在側軸方向的寬度或高度就是cross size。cross size根據側軸的方向來取決是寬度還是高度。

父級（彈性容器）屬性

display

這個屬性是定義在彈性容器上的；根據其值決定是內聯還是塊布局。這時它的直屬下級將會變成flex文檔流。

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

?

需要注意CSS的columns在flex容器里沒有效果。

flex-direction

這個是建立在主軸上的，從而定義了彈性項放置在容器的方向。FlexBox是單方向的布局概念。可以將彈性項視為主要布置在水平行或垂直列中。

.container {flex-direction: row | row-reverse | column | column-reverse; }

?

• row（默認）：在ltr排版方式下從左向右排列；在rtl排版方式下從右向左排列。
• row-reverse：與row排列方向相反，在ltr排版方式下從右向左排列；在rtl排版方式下從左向右排列。
• column：類似于row但是是頂部到底部
• column-reverse：類似于row-reverse但是是底部到頂部

flex-wrap

彈性項默認會全部集中在一行。你可以使用這個屬性來改變這種情況，讓他們根據你的需要進行自動換行。文檔方向在這里也起作用，決定了新的一行被堆疊的方向。

.container{flex-wrap: nowrap | wrap | wrap-reverse; }

?

• nowrap（默認）：單行顯示。在ltr排版下，項目自左向右；在rtl下，自右向左
• wrap：多行顯示。在ltr排版下，項目自左向右；在rtl下，自右向左
• wrap-reverse：多行顯示。與wrap相反

flex-flow（定義在彈性容器中）

這個是flex-direction和flex-wrap屬性的縮寫版，它同時定義了彈性容器的主軸和側軸。默認是row nowrap。

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

justify-content

這屬性是用來定義主軸上的對齊方式的。當所有的彈性項在一行并且無法彈性伸展，或者可伸展但是達到了最大尺寸，它能幫助分配剩下的多余空間。并且當他們行內溢出時，這個屬性也可以對項目對齊施加一些控制。

.container {justify-content: flex-start | flex-end | center | space-between | space-around; }

?

• flex-start（默認）：子項會從一行的起始處開始放置
• flex-end：子項會從一行的結尾處開始放置
• center：子項會集中在一行的中央
• space-between：子項會被均勻的分布在行內；首項放置在一行的開始，尾項放置在一行的結束
• space-around：子項會均勻的按照同等距離分布在一行。需要注意的是，在視覺上會覺得并不等距，因為所有子項在兩側都需要加上同等的空間。首項會與容器開始邊緣有一個單位空間的距離，但是與下一項會有兩個單位空間的距離，因為下一項也有它自己的適配空間。

align-items

這用來定義彈性項目在彈性容器的當前側軸上的默認行為。可以認為是側軸版的justity-content。

.container {align-items: flex-start | flex-end | center | baseline | stretch; }

?

• flex-start：彈性項在側軸起點邊的外邊距緊靠住該行在側軸起始的邊。
• flex-end：彈性項在側軸起點邊的外邊距緊靠改行在側軸結尾的邊。
• center：彈性項會被放置在側軸的中央。
• baseline：彈性項會根據他們的基線對齊。
• stretch（默認）：在側軸方向上拉伸彈性項以致填充滿彈性容器。（任遵從min-width/max-width）

align-content

這個屬性會根據在側軸上的額外空間來排列容器的行，類似于justify-content在主軸在對齊單個彈性項的方式。

注意，這個屬性對于只有單行的彈性項來說是沒有效果的。

.container {align-content: flex-start | flex-end | center | space-between | space-around | stretch; }

?

• flex-start：行會緊靠容器的起始位
• flex-end：行緊靠容器的結束位
• center：行緊靠容器的中間位
• space-between：每行會均勻分布；首行在容器起始處而最后行在容器結束處
• space-around：每行根據相同的距離均勻的分布
• stretch（默認）：每行將會伸展以占用剩余的空間。

子項（彈性項）的屬性

order

一般來說，彈性項會按照文檔流的順序進行布局。然而，order屬性可以控制他們出現在彈性容器中的順序。

.item {order: <integer>; }

?

flex-grow

這個屬性給予彈性項在需要的時候可以伸展的能力。它接收一個不帶單位的值作為比例。它規定了在容器內的彈性項可以占用多少的可用空間。

如果所有的子項都設置了flex-grow為1，那么容器內的剩余空間會被均勻的分配給所有自項。如果其中一項的值為2，那么這項的占用空間會是其他項的兩倍。

.item {flex-grow: <number>; /* default 0 */ }

?

設置負數是無效的。

flex-shrink

這定義了彈性項在需要的時候具有伸展的能力。

.item {flex-shrink: <number>; /* default 1 */ }

?

負數是無效的。

flex-basis

這定義了，當一個元素在被分配到剩余空間之前的默認大小。它可以是一個長度（如：20%，5rem等）或者一個關鍵字。auto關鍵字的意思就是『按照我的寬度和高度屬性調整尺寸』（他會暫時根據main-size來布局大小直到被棄用）。如果使用關鍵字content，意思就是『基于內容調整大小』——不過這個關鍵字并一定能很好的工作，因此很難去測試或者知曉它的兄弟們max-content，min-content和fit-content做了什么。

.item {flex-basis: <length> | auto; /* default auto */ }

如果設置為0，額外空間內容不會被分解開來。如果設置成auto，額外空間會基于它的flex-grow的值進行分布。

flex

這是flex-grow，flex-shrink和flex-basis組合縮寫版。第二個和第三個參數（flex-shrink和flex-basis）是可選的。默認是0 1 auto。

推薦你使用的這種縮寫屬性，這比設置單獨屬性更好。可以智能的通過縮寫形式設置值。

align-self

用來在單獨的伸縮項目上覆寫默認的對齊方式。

請看下align-items的解釋，幫助你了解可用值。

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

注意，float，clear和vertical-align在彈性項中會失效。

例子

讓我們從一個非常非常簡單的例子開始，解決一個非常日常的問題：完美居中。如果你使用flexBox布局，這將會變得非常簡單。

.parent {display: flex;height: 300px; /* Or whatever */ }.child {width: 100px; /* Or whatever */height: 100px; /* Or whatever */margin: auto; /* Magic! */ }

?

這個依賴于設置margin值為auto值，會自動獲取彈性容器的額外空間。因此設置垂直方向margin為auto可以讓彈性項完美的居中在兩個軸。

現在讓我們使用下一些其他屬性。

考慮使用一個包含六個項的列表，并且為了視覺審美給他設置了一個固定大小尺寸，但他們也有可能可以自動獲取尺寸大小。我們想要他們可以均勻的，并且完美分布在水平軸上，并且當我改變瀏覽器的大小，他們還是可以很好的展示（不需要引用媒體查詢！）。

.flex-container {/* 我們先創建一個彈性布局環境*/display: flex;/* 然后如果我們允許子項換行可以定義flow-direction* 記住這相等于:* flex-direction: row;* flex-wrap: wrap;*/flex-flow: row wrap;/* 然后我們再定義怎么樣分布剩余的空間 */justify-content: space-around; }

　　

完工。其他的一切不過是美化樣式。下面提供一些html，css代碼，可以在codePen調試并且改變下瀏覽器的大小看看會發生什么。
codePen

<ul class="flex-container"><li class="flex-item">1</li><li class="flex-item">2</li><li class="flex-item">3</li><li class="flex-item">4</li><li class="flex-item">5</li><li class="flex-item">6</li> </ul> SASS：@import "compass/css3";.flex-container {padding: 0;margin: 0;list-style: none;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-flex-flow: row wrap;justify-content: space-around; }.flex-item {background: tomato;padding: 5px;width: 200px;height: 150px;margin-top: 10px;line-height: 150px;color: white;font-weight: bold;font-size: 3em;text-align: center; }

?

?

讓我們再嘗試下其他東西。想象下，我們的網站所有頁面頭部都有個右對齊布局的導航，但是我們想讓他在中等大小的屏幕中居中顯示并且在小屏幕設備中單行顯示。非常簡單。

/* Large */ .navigation {display: flex;flex-flow: row wrap;/* This aligns items to the end line on main-axis */justify-content: flex-end; }/* Medium screens */ @media all and (max-width: 800px) {.navigation {/* When on medium sized screens, we center it by evenly distributing empty space around items */justify-content: space-around;} }/* Small screens */ @media all and (max-width: 500px) {.navigation {/* On small screens, we are no longer using row direction but column */flex-direction: column;} }

?

　　

codePen調試鏈接

讓我們再來試試一些更加靈活性的彈性項！關于移動先行，3列布局與頁眉頁腳全屏。和獨立的文檔順序。

.wrapper {display: flex;flex-flow: row wrap; }/* We tell all items to be 100% width */ .header, .main, .nav, .aside, .footer {flex: 1 100%; }/* We rely on source order for mobile-first approach* in this case:* 1. header* 2. nav* 3. main* 4. aside* 5. footer*//* Medium screens */ @media all and (min-width: 600px) {/* We tell both sidebars to share a row */.aside { flex: 1 auto; } }/* Large screens */ @media all and (min-width: 800px) {/* We invert order of first sidebar and main* And tell the main element to take twice as much width as the other two sidebars */.main { flex: 2 0px; }.aside-1 { order: 1; }.main { order: 2; }.aside-2 { order: 3; }.footer { order: 4; } }

?

codePen

Flexbox前綴

Flexbox接受一些運營商前綴以支持可以在更多的瀏覽器上使用。它不僅只包括在屬性前添加前綴，它也有完全不同的屬性名字和值名字。這是因為Flexbox規范隨著時間一直在變化，因此有了old，tweener和new版本。

當然最好的方式是使用最新的語法，并且通過Autoprefixer運行你的css。

這有一段Sass @mixin可供選擇，他也可以給你提供一些需要怎樣處理的想法，幫助你處理一些前綴問題。

@mixin flexbox() {display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex; }@mixin flex($values) {-webkit-box-flex: $values;-moz-box-flex: $values;-webkit-flex: $values;-ms-flex: $values;flex: $values; }@mixin order($val) {-webkit-box-ordinal-group: $val; -moz-box-ordinal-group: $val; -ms-flex-order: $val; -webkit-order: $val; order: $val; }.wrapper {@include flexbox(); }.item {@include flex(1 200px);@include order(2); }

?

　　

轉載于:https://www.cnblogs.com/z-y-zone/p/9517417.html

總結

以上是生活随笔為你收集整理的关于FlexBox的布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。