一、簡介
flexbox:全稱Flexible Box, 彈性盒子布局。可以簡單實現各種伸縮性的設計,它是由伸縮容器和伸縮項目組成。任何一個元素都可以指定為flexbox布局。這種新的布局方案在2009年是由W3C組織提出來的,在此之前,Web開發一般使用基於盒子模型的傳統頁面布局,依賴定位屬性、流動屬性和显示屬性來解決,參看鏈接:。彈性盒子布局的出現,極大的方便了開發者,在如今的ReactNative開發中,也已經被引入使用。
伸縮流布局結構圖如下:
彈性盒子布局具備的特徵:
1、伸縮容器的子元素稱為伸縮項目,伸縮項目使用伸縮布局來排版。伸縮布局和傳統布局不一樣,它按照伸縮流方向布局。
2、伸縮容器由兩條軸構成,分別為主軸(main axis)和交叉軸(cross axis)。主軸既可以用水平軸,也可以是豎直軸,根據開發者需要來決定。
3、主軸的起點叫main start,終點叫main end,主軸的空間用main size表示。
4、交叉軸的起點叫cross start,終點叫cross end,交叉軸的空間用cross size表示。
5、默認情況下,伸縮項目總是沿着主軸方向排版,從開始位置到終點位置。至於換行显示,則通過設置伸縮屬性來實現。
6、伸縮容器的屬性有:display、flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content
7、伸縮項目的屬性有: order、flex-grow、flex-shrink、flex-basis、flex、align-self
二、伸縮容器的屬性,全局設置排版
HTML:[注意:下面的演示截圖項目個數會根據需要選擇性註釋“flex-item”,有時用不到5個]
<!DOCTYPE html> <html> <head> <title>Flexbox</title> <!-- 採用外聯方式導入css文件 --> <link rel="stylesheet" type="text/css" href="./css_test.css"> </head> <body> <span class="flex-container"> <span class="flex-item" id="item1" style="color:white;font-size:20px">1</span> <span class="flex-item" id="item2" style="color:white;font-size:20px">2</span> <span class="flex-item" id="item3" style="color:white;font-size:20px">3</span> <span class="flex-item" id="item4" style="color:white;font-size:20px">4</span> <span class="flex-item" id="item5" style="color:white;font-size:20px">5</span> </span> </body> </html>
1、display:決定元素是否為伸縮容器
- flex:產生塊級伸縮容器
.flex-container { display: flex; }
- inline-flex:產生行內塊級伸縮容器
-
.flex-container { display: inline-flex; }
2、flex-direction:指定伸縮容器主軸的方向
- row:水平方向,從左到右
.flex-container { display: flex; flex-direction: row; width: 160px; height: 160px; background-color: red; } .flex-item { width: 50px; height: 50px; background-color: green; margin: 1px; }
- row-reverse:水平方向,從右到左
.flex-container { display: flex; flex-direction: row-reverse; width: 160px; height: 160px; background-color: red; } .flex-item { width: 50px; height: 50px; background-color: green; margin: 1px; }
- column:豎直方向,從上到下
.flex-container { display: flex; flex-direction: column; width: 160px; height: 160px; background-color: red; } .flex-item { width: 50px; height: 50px; background-color: green; margin: 1px; }
- column-reverse:豎直方向,從下到上
.flex-container { display: flex; flex-direction: column-reverse; width: 160px; height: 160px; background-color: red; } .flex-item { width: 50px; height: 50px; background-color: green; margin: 1px; }
3、flex-wrap:指定伸縮容器主軸方向空間不足時,決定是否換行以及換行方式
- nowarp:不換行
.flex-container { display: flex; flex-direction: row; flex-wrap: nowrap; width: 160px; height: 160px; background-color: red; } .flex-item { width: 50px; //下圖單行狀態寬度被重新計算 height: 50px; background-color: green; margin: 1px; }
- warp:換行,若主軸為水平方向,換行方向是從上到下
.flex-container { display: flex; flex-direction: row; flex-wrap: wrap; width: 160px; height: 160px; background-color: red; } .flex-item { width: 50px; height: 50px; background-color: green; margin: 1px; }
- wrap-reverse:換行,若主軸為水平方向,換行方向是從下到上
.flex-container { display: flex; flex-direction: row; flex-wrap: wrap-reverse; width: 160px; height: 160px; background-color: red; } .flex-item { width: 50px; height: 50px; background-color: green; margin: 1px; }
4、flex-flow:flex-direction和flex-wrap的縮寫,同時指定伸縮容器主軸方向和換行設置
- row nowrap:默認主軸是水平方向,從左到右,且不換行
.flex-container { display: flex; flex-flow: row nowrap; width: 160px; height: 160px; background-color: red; } .flex-item { width: 50px; //下圖單行狀態寬度被重新計算 height: 50px; background-color: green; margin: 1px; }
5、justify-content:決定伸縮項目沿着主軸線的對齊方式
- flex-start:與主軸線起始位置靠齊
.flex-container { display: flex; flex-flow: row wrap; justify-content: flex-start; width: 160px; height: 160px; background-color: red; } .flex-item { width: 50px; height: 50px; background-color: green; margin: 1px; }
- flex-end:與主軸線結束位置靠齊
.flex-container { display: flex; flex-flow: row wrap; justify-content: flex-end; width: 160px; height: 160px; background-color: red; } .flex-item { width: 50px; height: 50px; background-color: green; margin: 1px; }
- center:與主軸線中間位置靠齊
.flex-container { display: flex; flex-flow: row wrap; justify-content: center; width: 160px; height: 160px; background-color: red; } .flex-item { width: 50px; height: 50px; background-color: green; margin: 1px; }
- space-between:平均分配到主軸線里,第一個項目靠齊起始位置,最後一個項目靠齊終點位置
.flex-container { display: flex; flex-flow: row wrap; justify-content: space-between; width: 160px; height: 160px; background-color: red; } .flex-item { width: 50px; height: 50px; background-color: green; margin: 1px; }
- sapce-around:平均分配到主軸線里,兩端保留一半的空間
.flex-container { display: flex; flex-flow: row wrap; justify-content: space-around; width: 160px; height: 160px; background-color: red; } .flex-item { width: 50px; height: 50px; background-color: green; margin: 1px; }
6、align-items:決定伸縮項目不能換行時沿着交叉軸線的對齊方式
- flex-start:與交叉軸線起始位置靠齊
.flex-container { display: flex; flex-flow: row nowrap; align-items: flex-start; width: 160px; height: 160px; background-color: red; } .flex-item { width: 50px; //下圖單行狀態寬度被重新計算 height: 50px; background-color: green; margin: 1px; }
- flex-end:與交叉軸線結束位置靠齊
.flex-container { display: flex; flex-flow: row nowrap; align-items: flex-end; width: 160px; height: 160px; background-color: red; } .flex-item { width: 50px; //下圖單行狀態寬度被重新計算 height: 50px; background-color: green; margin: 1px; }
- center:與交叉軸線中間位置靠齊
.flex-container { display: flex; flex-flow: row nowrap; align-items: center; width: 160px; height: 160px; background-color: red; } .flex-item { width: 50px; height: 50px; background-color: green; margin: 1px; }
- baseline:根據基線對齊
.flex-container { display: flex; flex-flow: row nowrap; align-items: baseline; width: 160px; height: 160px; background-color: red; } .flex-item { width: 50px; height: 50px; background-color: green; margin: 1px; } #item1 { padding-top: 25px; } #item2 { padding-top: 20px; } #item3 { padding-top: 15px; } #item4 { padding-top: 10px; } #item5 { padding-top: 5px; }
- stretch:沿着交叉軸線拉伸填充整個伸縮容器
.flex-container { display: flex; flex-flow: row nowrap; align-items: stretch; width: 160px; height: 160px; background-color: red; } .flex-item { width: 50px;//此時可以設置寬度,但不能設置高度,否則無法拉伸 background-color: green; margin: 1px; }
7、align-content:決定伸縮項目可以換行時沿着交叉軸線的對齊方式,flex-warp:warp一定要開啟
- flex-start:與交叉軸線起始位置靠齊
.flex-container { display: flex; flex-flow: row wrap; align-content:flex-start; width: 160px; height: 160px; background-color: red; } .flex-item { width: 50px; height: 50px; background-color: green; margin: 1px; }
- flex-end:與交叉軸線結束位置靠齊
.flex-container { display: flex; flex-flow: row wrap; align-content:flex-end; width: 160px; height: 160px; background-color: red; } .flex-item { width: 50px; height: 50px; background-color: green; margin: 1px; }
- center:與主軸線中間位置靠齊
.flex-container { display: flex; flex-flow: row wrap; align-content:center; width: 160px; height: 160px; background-color: red; } .flex-item { width: 50px; height: 50px; background-color: green; margin: 1px; }
- space-between:平均分配到主軸線里,第一行項目靠齊起始位置,最後一行項目靠齊終點位置
.flex-container { display: flex; flex-flow: row wrap; align-content:space-between; width: 160px; height: 160px; background-color: red; } .flex-item { width: 50px; height: 50px; background-color: green; margin: 1px; }
- sapce-around:所有行平均分配到主軸線里,兩端保留一半的空間
.flex-container { display: flex; flex-flow: row wrap; align-content:space-around; width: 160px; height: 160px; background-color: red; } .flex-item { width: 50px; height: 50px; background-color: green; margin: 1px; }
- stretch:沿着交叉軸
.flex-container { display: flex; flex-flow: row wrap; align-content:stretch; width: 160px; height: 160px; background-color: red; } .flex-item { width: 50px; //不要設置高度,不然無法拉伸 background-color: green; margin: 1px; }
三、伸縮項目的屬性,單個設置排版
1、order:定義伸縮項目的排列順序。數值越小,排列越靠前,默認值為0。
- 表達式 order: integer;
.flex-container { display: flex; flex-flow: row wrap; width: 160px; height: 160px; background-color: red; } .flex-item { width: 50px; height: 50px; background-color: green; margin: 1px; } #item4 { order: -1; } #item5 { order: -2; }
2、flex-grow:定義伸縮項目的放大比例,默認值為0,表示即使存在剩餘空間,也不放大。
- 表達式 flex-grow: number;
.flex-container { display: flex; flex-flow: row wrap; width: 160px; height: 160px; background-color: red; } .flex-item { width: 50px; height: 50px; background-color: green; margin: 1px; } #item2 { flex-grow: 1; //空間不足,item2不會放大 } #item4 { flex-grow: 1; //item4放大填滿剩餘空間 }
3、flex-shrink:定義伸縮項目的收縮比例,默認值為1。
- 表達式 flex-shrink: numer;
.flex-container { display: flex; flex-flow: row nowrap; width: 160px; height: 160px; background-color: red; } .flex-item { width: 50px; height: 50px; background-color: green; margin: 1px; } #item4 { flex-shrink:3; //單行,空間有限,item4縮小為原來的1/3 } #item5 { flex-shrink:4; //單行,空間有限,item5縮小為原來的1/5 }
4、flex-basis:定義伸縮項目的基準值,剩餘空間按照比例進行伸縮,默認auto。
- auto
.flex-container { display: flex; flex-flow: row wrap; width: 160px; height: 160px; background-color: red; } .flex-item { width: 50px; height: 50px; background-color: green; margin: 1px; } #item5 { flex-basis:auto; }
- flex-basis: length
.flex-container { display: flex; flex-flow: row wrap; width: 160px; height: 160px; background-color: red; } .flex-item { width: 50px; height: 50px; background-color: green; margin: 1px; } #item5 { flex-basis:200px; }
5、flex:是flex-grow、flex-shrink、flex-basis的縮寫,默認值 0 1 auto。
- none: 不設置
.flex-container { display: flex; flex-flow: row wrap; width: 160px; height: 160px; background-color: red; } .flex-item { width: 50px; height: 50px; background-color: green; margin: 1px; } #item2 { flex: none; /* 等同於 flex: 0 0 auto */ }
- flex-grow flex-shrink flex-basis: 設置放大或縮小或基準線
.flex-container { display: flex; flex-flow: row wrap; width: 160px; height: 160px; background-color: red; } .flex-item { width: 50px; height: 50px; background-color: green; margin: 1px; } #item2 { flex: 1; /* 等同於 flex: 1 1 auto 或者 等同於 flex: auto*/ }
6、align-self:用來設置伸縮項目在交叉軸的對齊方式。
- auto:自動對齊
.flex-container { display: flex; flex-flow: row wrap; width: 160px; height: 160px; background-color: red; } .flex-item { width: 50px; height: 50px; background-color: green; margin: 1px; } #item3 { align-self: auto; }
- flex-start: 向交叉軸的開始位置對齊
.flex-container { display: flex; flex-flow: row wrap; width: 160px; height: 160px; background-color: red; } .flex-item { width: 50px; height: 50px; background-color: green; margin: 1px; } #item3 { align-self: flex-start; }
- flex-end: 向交叉軸的結束位置對齊
.flex-container { display: flex; flex-flow: row wrap; width: 160px; height: 160px; background-color: red; } .flex-item { width: 50px; height: 50px; background-color: green; margin: 1px; } #item3 { align-self: flex-end; }
- center: 向交叉軸的中間位置對齊
.flex-container { display: flex; flex-flow: row wrap; width: 160px; height: 160px; background-color: red; } .flex-item { width: 50px; height: 50px; background-color: green; margin: 1px; } #item3 { align-self: center; }
- baseline:向交叉軸的基準線對齊
.flex-container { display: flex; flex-flow: row wrap; width: 160px; height: 160px; background-color: red; } .flex-item { width: 50px; height: 50px; background-color: green; margin: 1px; } #item1 { align-self: baseline; margin-top: 50px; } #item2 { align-self: baseline; }
- stretch: 在交叉軸拉伸填滿伸縮容器
.flex-container { display: flex; flex-flow: row wrap; width: 160px; height: 160px; background-color: red; } .flex-item { width: 50px; background-color: green; margin: 1px; } #item1 { align-self: stretch; } #item2 { align-self: stretch; } #item3 { align-self: stretch; }
本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理【其他文章推薦】
※網頁設計公司推薦更多不同的設計風格,搶佔消費者視覺第一線
※廣告預算用在刀口上,網站設計公司幫您達到更多曝光效益
※自行創業 缺乏曝光? 下一步"網站設計"幫您第一時間規劃公司的門面形象