-
1 # 網路圈
-
2 # Web前端進階指南
網頁佈局（layout）是CSS的一個重點應用。Flex佈局，可以簡便、完整、響應式地實現各種頁面佈局。目前，它已經得到了所有瀏覽器的支援，這意味著，現在就能很安全地使用這項功能。
基本概念Flex是Flexible Box的縮寫，意為”彈性佈局”，用來為盒狀模型提供最大的靈活性。
任何一個容器都可以指定為Flex佈局。
採用Flex佈局的元素，稱為Flex容器（flex container），簡稱”容器”。它的所有子元素自動成為容器成員，稱為Flex專案（flex item），簡稱”專案”。
容器屬性1、flex-direction屬性
flex-direction: row | row-reverse | column | column-reverse;
row（預設值）：主軸為水平方向，起點在左端。row-reverse：主軸為水平方向，起點在右端。column：主軸為垂直方向，起點在上沿。column-reverse：主軸為垂直方向，起點在下沿。2、flex-wrap屬性
flex-wrap: nowrap | wrap | wrap-reverse;
nowrap（預設）：不換行。
wrap：換行，第一行在上方。
wrap-reverse：換行，第一行在下方。
3、flex-flow屬性
flex-flow: <flex-direction> <flex-wrap>;
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap。
4、 justify-content屬性
justify-content屬性定義了專案在主軸上的對齊方式。
justify-content: flex-start | flex-end | center | space-between | space-around;
flex-start（預設值）：左對齊flex-end：右對齊center： 居中space-between：兩端對齊，專案之間的間隔都相等。space-around：每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍。5、align-items屬性
align-items屬性定義專案在交叉軸上如何對齊。
align-items: flex-start | flex-end | center | baseline | stretch;
flex-start：交叉軸的起點對齊。flex-end：交叉軸的終點對齊。center：交叉軸的中點對齊。baseline: 專案的第一行文字的基線對齊。stretch（預設值）：如果專案未設定高度或設為auto，將佔滿整個容器的高度。6、align-content屬性
align-content屬性定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
flex-start：與交叉軸的起點對齊。flex-end：與交叉軸的終點對齊。center：與交叉軸的中點對齊。space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。stretch（預設值）：軸線佔滿整個交叉軸。專案的屬性1、order屬性
order屬性定義專案的排列順序。數值越小，排列越靠前，預設為0。
order: <integer>;
2、flex-grow屬性
flex-grow屬性定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大。
flex-grow: <number>; /* default 0 *
3、flex-shrink屬性
flex-shrink屬性定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。
flex-shrink: <number>; /* default 1 */
4、flex-basis屬性
flex-basis屬性定義了在分配多餘空間之前，專案佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即專案的本來大小。
flex-basis: <length> | auto; /* default auto */
5、flex屬性
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。
flex: none | [ <"flex-grow"> <"flex-shrink">? || <"flex-basis"> ]
6、align-self屬性
align-self屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性。預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。
align-self: auto | flex-start | flex-end | center | baseline | stretch;
更多的Flex佈局應用可到W3C菜鳥教程檢視，或者去張大神、阮一峰的部落格檢視，詳細的很。
-
3 # 科學教育雲平臺
CSS3 彈性盒子Flex CSS3 的一種新的佈局模式。
CSS3 彈性盒（ Flexible Box 或 flexbox），是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的佈局方式。
引入彈性盒佈局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。
瀏覽器支援
表格中的數字表示支援該屬性的第一個瀏覽器的版本號。
緊跟在數字後面的 -webkit- 或 -moz- 為指定瀏覽器的字首。
CSS3 彈性盒子內容
彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成。
彈性容器透過設定 display 屬性的值為 flex 或 inline-flex將其定義為彈性容器。
彈性容器內包含了一個或多個彈性子元素。
注意： 彈性容器外及彈性子元素內是正常渲染的。彈性盒子只定義了彈性子元素如何在彈性容器內佈局。
彈性子元素通常在彈性盒子內一行顯示。預設情況每個容器只有一行。
以下元素展示了彈性子元素在一行內顯示，從左到右:
例項
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}
.flex-item{
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div>
<div>flex item 1</div>
<div>flex item 2</div>
<div>flex item 3</div>
</div>
</body>
</html>
當然我們可以修改排列方式。
如果我們設定 direction 屬性為 rtl (right-to-left),彈性子元素的排列方式也會改變，頁面佈局也跟著改變:
例項
body {
direction: rtl;
}
.flex-container {
display: -webkit-flex;
display: flex;
width:400px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
flex-direction 順序指定了彈性子元素在父容器中的位置。
語法
flex-direction: row | row-reverse | column | column-reverse
flex-direction的值有:
row：橫向從左到右排列（左對齊），預設的排列方式。
row-reverse：反轉橫向排列（右對齊，從後往前排，最後一項排在最前面。
column：縱向排列。
column-reverse：反轉縱向排列，從後往前排，最後一項排在最上面。
以下例項演示了 row-reverse 的使用:
例項
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
width: 400px;
height: 250px;
background-color: lightgrey;
}
以下例項演示了 column 的使用:
例項
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
width: 400px;
height: 250px;
background-color: lightgrey;
}
以下例項演示了 column-reverse 的使用:
例項
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column-reverse;
flex-direction: column-reverse;
width: 400px;
height: 250px;
background-color: lightgrey;
}
justify-content 屬性
內容對齊（justify-content）屬性應用在彈性容器上，把彈性項沿著彈性容器的主軸線（main axis）對齊。
justify-content 語法如下：
justify-content: flex-start | flex-end | center | space-between | space-around
各個值解析:
flex-start：
彈性專案向行頭緊挨著填充。這個是預設值。第一個彈性項的main-start外邊距邊線被放置在該行的main-start邊線，而後續彈性項依次平齊擺放。
flex-end：
彈性專案向行尾緊挨著填充。第一個彈性項的main-end外邊距邊線被放置在該行的main-end邊線，而後續彈性項依次平齊擺放。
center：
彈性專案居中緊挨著填充。（如果剩餘的自由空間是負的，則彈性專案將在兩個方向上同時溢位）。
space-between：
彈性專案平均分佈在該行上。如果剩餘空間為負或者只有一個彈性項，則該值等同於flex-start。否則，第1個彈性項的外邊距和行的main-start邊線對齊，而最後1個彈性項的外邊距和行的main-end邊線對齊，然後剩餘的彈性項分佈在該行上，相鄰專案的間隔相等。
space-around：
彈性專案平均分佈在該行上，兩邊留有一半的間隔空間。如果剩餘空間為負或者只有一個彈性項，則該值等同於center。否則，彈性專案沿該行分佈，且彼此間隔相等（比如是20px），同時首尾兩邊和彈性容器之間留有一半的間隔（1/2*20px=10px）
以下例項演示了 flex-end 的使用:
例項
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-end;
justify-content: flex-end;
width: 400px;
height: 250px;
background-color: lightgrey;
}
以下例項演示了 center 的使用:
例項
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
width: 400px;
height: 250px;
background-color: lightgrey;
}
以下例項演示了 space-between 的使用:
例項
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
width: 400px;
height: 250px;
background-color: lightgrey;
}
以下例項演示了 space-around 的使用:
例項
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-around;
justify-content: space-around;
width: 400px;
height: 250px;
background-color: lightgrey;
}
align-items 屬性
align-items 設定或檢索彈性盒子元素在側軸（縱軸）方向上的對齊方式。
語法
align-items: flex-start | flex-end | center | baseline | stretch
各個值解析:
flex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
flex-end：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
center：彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢位相同的長度）。
baseline：如彈性盒子元素的行內軸與側軸為同一條，則該值與"flex-start"等效。其它情況下，該值將參與基線對齊。
stretch：如果指定側軸大小的屬性值為"auto"，則其值會使專案的邊距盒的尺寸儘可能接近所在行的尺寸，但同時會遵照"min/max-width/height"屬性的限制。
以下例項演示了 stretch(預設值) 的使用:
例項
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: stretch;
align-items: stretch;
width: 400px;
height: 250px;
background-color: lightgrey;
}
以下例項演示了 flex-start 的使用:
例項
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: flex-start;
align-items: flex-start;
width: 400px;
height: 250px;
background-color: lightgrey;
}
以下例項演示了 flex-end 的使用:
例項
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: flex-end;
align-items: flex-end;
width: 400px;
height: 250px;
background-color: lightgrey;
}
以下例項演示了 center 的使用:
例項
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
width: 400px;
height: 250px;
background-color: lightgrey;
}
以下例項演示了 baseline 的使用:
例項
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: baseline;
align-items: baseline;
width: 400px;
height: 250px;
background-color: lightgrey;
}
flex-wrap 屬性用於指定彈性盒子的子元素換行方式。
語法
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
各個值解析:
nowrap - 預設，彈性容器為單行。該情況下彈性子項可能會溢位容器。
wrap - 彈性容器為多行。該情況下彈性子項溢位的部分會被放置到新行，子項內部會發生斷行
wrap-reverse -反轉 wrap 排列。
以下例項演示了 nowrap 的使用:
例項
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
width: 300px;
height: 250px;
background-color: lightgrey;
以下例項演示了 wrap 的使用:
例項
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
width: 300px;
height: 250px;
background-color: lightgrey;
}
以下例項演示了 wrap-reverse 的使用:
例項
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
width: 300px;
height: 250px;
background-color: lightgrey;
}
align-content 屬性
align-content 屬性用於修改 flex-wrap 屬性的行為。類似於 align-items, 但它不是設定彈性子元素的對齊，而是設定各個行的對齊。
語法
align-content: flex-start | flex-end | center | space-between | space-around | stretch
各個值解析:
stretch - 預設。各行將會伸展以佔用剩餘的空間。
flex-start - 各行向彈性盒容器的起始位置堆疊。
flex-end - 各行向彈性盒容器的結束位置堆疊。
center -各行向彈性盒容器的中間位置堆疊。
space-between -各行在彈性盒容器中平均分佈。
space-around - 各行在彈性盒容器中平均分佈，兩端保留子元素與子元素之間間距大小的一半。
以下例項演示了 center 的使用:
例項
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-content: center;
align-content: center;
width: 300px;
height: 300px;
background-color: lightgrey;
}
彈性子元素屬性
排序
語法
order:
各個值解析:
<integer>：用整數值來定義排列順序，數值小的排在前面。可以為負值。
order 屬性設定彈性容器內彈性子元素的屬性:
例項
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
.first {
-webkit-order: -1;
order: -1;
}
對齊
設定"margin"值為"auto"值，自動獲取彈性容器中剩餘的空間。所以設定垂直方向margin值為"auto"，可以使彈性子元素在彈性容器的兩上軸方向都完全集中。
以下例項在第一個彈性子元素上設定了 margin-right: auto; 。 它將剩餘的空間放置在元素的右側：
例項
.flex-item {
background-color: cornflowerblue;
width: 75px;
height: 75px;
margin: 10px;
}
.flex-item:first-child {
margin-right: auto;
}
完美的居中
以下例項將完美解決我們平時碰到的居中問題。
使用彈性盒子，居中變的很簡單，只想要設定 margin: auto; 可以使得彈性子元素在兩上軸方向上完全居中:
例項
.flex-item {
background-color: cornflowerblue;
width: 75px;
height: 75px;
margin: auto;
}
align-self
align-self 屬性用於設定彈性元素自身在側軸（縱軸）方向上的對齊方式。
語法
align-self: auto | flex-start | flex-end | center | baseline | stretch
各個值解析:
auto：如果"align-self"的值為"auto"，則其計算值為元素的父元素的"align-items"值，如果其沒有父元素，則計算值為"stretch"。
flex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
flex-end：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
center：彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢位相同的長度）。
baseline：如彈性盒子元素的行內軸與側軸為同一條，則該值與"flex-start"等效。其它情況下，該值將參與基線對齊。
stretch：如果指定側軸大小的屬性值為"auto"，則其值會使專案的邊距盒的尺寸儘可能接近所在行的尺寸，但同時會遵照"min/max-width/height"屬性的限制。
以下例項演示了彈性子元素上 align-self 不同值的應用效果：
例項
.flex-item {
background-color: cornflowerblue;
width: 60px;
min-height: 100px;
margin: 10px;
}
.item1 {
-webkit-align-self: flex-start;
align-self: flex-start;
}
.item2 {
-webkit-align-self: flex-end;
align-self: flex-end;
}
.item3 {
-webkit-align-self: center;
align-self: center;
}
.item4 {
-webkit-align-self: baseline;
align-self: baseline;
}
.item5 {
-webkit-align-self: stretch;
align-self: stretch;
}
flex 屬性用於指定彈性子元素如何分配空間。
語法
flex：none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
各個值解析:
none：none關鍵字的計算值為: 0 0 auto
[ flex-grow ]：定義彈性盒子元素的擴充套件比率。
[ flex-shrink ]：定義彈性盒子元素的收縮比率。
[ flex-basis ]：定義彈性盒子元素的預設基準值。
以下例項中，第一個彈性子元素佔用了 2/4 的空間，其他兩個各佔 1/4 的空間:
例項
.flex-item {
background-color: cornflowerblue;
margin: 10px;
}
.item1 {
-webkit-flex: 2;
flex: 2;
}
.item2 {
-webkit-flex: 1;
flex: 1;
}
.item3 {
-webkit-flex: 1;
flex: 1;
}
使用彈性盒子建立響應式頁面
CSS3 彈性盒子屬性
下表列出了在彈性盒子中常用到的屬性:
屬性 描述
display 指定 HTML 元素盒子型別。
flex-direction 指定了彈性容器中子元素的排列方式
justify-content 設定彈性盒子元素在主軸（橫軸）方向上的對齊方式。
align-items 設定彈性盒子元素在側軸（縱軸）方向上的對齊方式。
flex-wrap 設定彈性盒子的子元素超出父容器時是否換行。
align-content 修改 flex-wrap 屬性的行為，類似align-items, 但不是設定子元素對齊，而是設定行對齊
flex-flow flex-direction 和 flex-wrap 的簡寫
order 設定彈性盒子的子元素排列順序。
align-self 在彈性子元素上使用。覆蓋容器的 align-items 屬性。
flex 設定彈性盒子的子元素如何分配空間。
-
4 # 程式碼與夢想
多練習。其實很沒那麼難！
剛學前端時，用float感覺前段佈局太垃圾了！之前做ios的！
後來發現了flex，感覺這才是該有的佈局系統！
後來又發現了grid,配合flex那才叫爽！
所以，多看文件，弄清他們佈局思維再去嘗試就會簡單很多！
-
5 # 花老廝
傳統的佈局，都是基於盒模型，display，float，position，有的時候感覺它做出來的介面缺少一些靈活性，這時候我們就可以使用Flex佈局，是Flexible Box的縮寫，意為"彈性佈局"，它可以讓你介面有很大的靈活性。但是你得了解Flex的語法，好了，不多說了，直接上乾貨！！！
網上的圖片.jpg
1. 基本概念
採用Flex佈局的元素，稱為Flex容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為Flex專案（flex item），簡稱"專案"。
2. 標籤屬性
容器的屬性
1. 主軸方向：左到右（預設） | 右到左 | 上到下 | 下到上
flex-direction: row | row-reverse | column | column-reverse
2. 換行：不換行（預設） | 換行 | 換行並第一行在下方
flex-wrap: nowrap | wrap | wrap-reverse
3.主軸方向和換行簡寫
flex-flow: <flex-direction> || <flex-wrap>
4.主軸對齊方式：左對齊（預設） | 右對齊 | 居中對齊 | 兩端對齊 | 平均分佈
justify-content: flex-start | flex-end | center | space-between | space-around
5.交叉軸對齊方式：頂部對齊 | 底部對齊 | 居中對齊 | 文字基線對齊 | 如果專案未設定高度或設為auto，將佔滿整個容器的高度。（預設）
align-items: flex-start | flex-end | center | baseline | stretch
6.多主軸對齊：頂部對齊 | 底部對齊 | 居中對齊 | 上下對齊並鋪滿 | 軸線佔滿整個交叉軸。（預設）
align-content: flex-start | flex-end | center | space-between | space-around | stretch
專案的屬性
1. 排序：數值越小，越排前，預設為0
order: <integer>
2.放大：預設0（即如果有剩餘空間也不放大，值為1則放大，2是1的雙倍大小(約等)，以此類推）
flex-grow: <number>; /* default 0 */
3.縮小：如果所有專案的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果一個專案的flex-shrink屬性為0，其他專案都為1，則空間不足時，前者不縮小。
負值對該屬性無效。）
flex-shrink: <number>; /* default 1 */
4.固定大小：預設為0，可以設定px值，也可以設定百分比大小
flex-basis: <length> | auto; /* default auto */
5.flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto
flex: none | [ <"flex-grow"> <"flex-shrink">? || <"flex-basis"> ]
6.單獨對齊方式：自動（預設） | 頂部對齊 | 底部對齊 | 居中對齊 | 文字基線對齊 | 上下對齊並鋪滿
align-self: auto | flex-start | flex-end | center | baseline | stretch
回覆列表
這幾年前端技術發展較快，談到前端就離不開頁面佈局。網頁佈局大概經歷了這幾個階段：最早期的Table表格佈局 => 傳統的盒狀模型佈局 => 再到現在的Flex彈性佈局。
而彈性佈局也是隨著CSS3而推出的，那我們該如何靈活運用彈性佈局呢？彈性佈局較傳統佈局方式有哪些優勢呢？
傳統盒狀模型佈局的弊端截至當前，依舊有很多網站是基於盒狀模型來佈局的，主要依懶display屬性 + position屬性 + float屬性來精確定位元素。雖然這種佈局方式可以精確定位元素，但它依舊有很多弊端，比如：
瀏覽器相容性問題較多；
特殊佈局（如垂直居中）較難實現，有時寬度計算不準確；
過多的position會影響瀏覽器渲染效能等。
彈性佈局如何使用？彈性佈局也就是Flex佈局，透過Flex佈局可以很簡單的實現各種頁面佈局，而且它是響應式的，當前主流的瀏覽器都支援彈性佈局。
彈性佈局該如何來使用呢？掌握以下技術可以快速掌握彈性佈局。
1、父級元素設定
彈性佈局只需要對父元素和子元素進行很少的設定即可，父級元素設定display:flex就能開啟彈性佈局。開啟彈性佈局後，子級元素的排列方式、對齊方式也要在父級元素上設定，具體如下：
flex-direction：定義子級元素的排列方式；
flex-wrap：定義子級元素是否在一行顯示（要不要換行）；
justify-content：定義子元素水平排列方式；
align-items 與 align-content：定義子級元素垂直排列方式。
2、子級元素的設定
子級元素可用屬性不多，一般只有兩個：
box-sizing：設定子級元素的盒模型
flex：設定子級元素的寬度係數。