前端彈性布局神器display:flex詳解

在進行網(wǎng)頁前端設(shè)計時,需要垂直居中顯示文本,但CSS似乎沒有明確的垂直居中的代碼方法,由于目前的頁面不再考慮以前的瀏覽器了,因此采用CSS3的display:flex方法來實現(xiàn)。現(xiàn)記錄一下flex屬性的相關(guān)資料。
一、flex布局是什么?
Flex是Flexible Box的縮寫,翻譯成中文就是“彈性盒子”,用來為盒裝模型提供最大的靈活性。任何一個容器都可以指定為Flex布局。設(shè)為Flex布局以后,子元素的float、clear和vertical-align屬性將失效。它即可以應(yīng)用于容器中,也可以應(yīng)用于行內(nèi)元素。
.box{ display: -webkit-flex; /*在webkit內(nèi)核的瀏覽器上使用要加前綴*/ display: flex; //將對象作為彈性伸縮盒顯示 }
行內(nèi)元素也可以使用Flex布局:
.box { display: inline-flex; //將對象作為內(nèi)聯(lián)塊級彈性伸縮盒顯示 }
兼容性寫法:
.box { display: flex || inline-flex; }
二、flex布局的基本概念
先來看一下這張示意圖:
采用Flex布局的元素,被稱為Flex容器(flex container),簡稱“容器”。其所有子元素自動成為容器成員,成為Flex項目(Flex item),簡稱“項目”。
容器默認存在兩根主軸:水平方向主軸(main axis)和垂直方向交叉軸(cross axis),默認項目按主軸排列。
- main start/main end:主軸開始位置/結(jié)束位置;
- cross start/cross end:交叉軸開始位置/結(jié)束位置;
- main size/cross size:單個項目占據(jù)主軸/交叉軸的空間;
三、容器屬性
設(shè)置在容器上的屬性有6種:
屬性名稱 | 屬性含義 |
flex-direction | 容器內(nèi)子項的排列方向(默認橫向排列) |
flex-wrap | 容器內(nèi)子項換行方式 |
flex-flow | 以上兩個屬性的簡寫方式 |
justify-content | 子項在主軸上的對齊方式 |
align-items | 子項在交叉軸上如何對齊 |
align-content | 定義了多根軸線的對齊方式。如果子項只有一根軸線,該屬性不起作用。 |
1、flex-direction屬性:決定主軸的方向(即項目的排列方向)
.box { flex-direction: row | row-reverse | column | column-reverse; }
- row(默認):主軸水平方向,起點在左端;
- row-reverse:主軸水平方向,起點在右端;
- column:主軸垂直方向,起點在上邊沿;
- column-reserve:主軸垂直方向,起點在下邊沿。
2、flex-wrap屬性:定義換行情況
默認情況下,項目都排列在一條軸線上,但有可能一條軸線排不下。
.box{ flex-wrap: nowrap | wrap | wrap-reverse; }
nowrap(默認):不換行;
wrap:換行,第一行在上方;
wrap-reverse:換行,第一行在下方。
3、flex-flow屬性:flex-direction和flex-wrap的簡寫,默認row nowrap
.box{ flex-flow: <flex-direction> || <flex-wrap>; }
4、justify-content屬性:定義項目在主軸上的對齊方式。
對齊方式與軸的方向有關(guān),本文中假設(shè)主軸從左到右。
.box { justify-content: start | end | flex-start | flex-end | center | left | right | space-between | space-around | space-evenly | stretch | safe | unsafe | baseline | first baseline | last baseline; }
flex-start(默認值):左對齊;
flex-end:右對齊;
center:居中;
space-between:兩端對齊,項目之間間隔相等;
space-around:每個項目兩側(cè)的間隔相等,即項目之間的間隔比項目與邊框的間隔大一倍。
5、align-items屬性:定義在交叉軸上的對齊方式
對齊方式與交叉軸的方向有關(guān),假設(shè)交叉軸從下到上。
.box{ align-items: flex-start | flex-end | center | baseline | stretch; }
flex-start:起點對齊;
flex-end:終點對齊;
center:中點對齊;
baseline:項目的第一行文字的基線對齊;
stretch(默認值):如果項目未設(shè)置高度或設(shè)為auto,將占滿整個容器的高度。
6、align-content屬性:定義多根軸線的對齊方式
如果項目只有一根軸線,該屬性不起作用。所以,容器必須設(shè)置flex-wrap:···;
.box{ align-content: flex-start | flex-end | center | space-between | space-around | stretch; }
flex-start:與交叉軸的起點對齊;
flex-end:與交叉軸的終點對齊;
center:與交叉軸的中點對齊;
space-between:與交叉軸的兩端對齊,軸線之間的間隔平均分布;
space-around:每根軸線兩側(cè)的間隔相等,即軸線之間的間隔比軸線與邊框的間隔大一倍;
stretch(默認值):軸線占滿整個交叉軸。
有意思的是,當(dāng)你不給項目設(shè)置高度但是給容器設(shè)置align-content不為stretch時,同一軸線上的項目的高度將等于項目中高度最高的項目。
四、項目的屬性
設(shè)置在項目上的屬性也有6個:
項目名稱 | 意義與用法 |
order | 子項的排列順序。數(shù)值越小,排列越靠前,默認為0。 |
flex-grow | 子項的放大比例,默認為0,即如果存在剩余空間,也不放大。 |
flex-shrink | 子項的縮小比例,默認為1,即如果空間不足,該項目將縮小。 |
flex-basis | 在分配多余空間之前,子項占據(jù)的主軸空間(main size)。瀏覽器根據(jù)這個屬性,計算主軸是否有多余空間。它的默認值為auto,即項目的本來大小。 |
flex | 是flex-grow, flex-shrink 和 flex-basis的簡寫,默認值為0 1 auto。后兩個屬性可選。 |
align-self | 允許單個子項有與其它子項不一樣的對齊方式,可覆蓋align-items屬性。默認值為auto,表示繼承父元素的align-items屬性,如果沒有父元素,則等同于stretch。 |
子項CSS舉例:
.flex-item { order: <integer>; } .flex-item { flex-grow: <number>; /* default 0 */ } .flex-item { flex-shrink: <number>; /* default 1 */ } .flex-item { flex-basis: <length> | auto; /* default auto */ } .flex-item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] } .flex-item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }
1、order屬性:定義項目的排列順序
數(shù)值越小,排列越靠前,默認為0,可以是負值。
.item { order: <整數(shù)>; }
2、flex-grow屬性:定義項目的放大比例
默認值為0,即如果空間有剩余,也不放大??梢允切?shù),按比例占據(jù)剩余空間。
.item{ flex-grow: <數(shù)字>; }
若所有項目的flex-grow的數(shù)值都相同,則等分剩余空間:
若果有一個項目flex-grow為2,其余都為1,則該項目占據(jù)剩余空間是其余的2倍:
3、flex-shrink屬性:定義項目的縮小比例
默認值都為1,即如果空間不足將等比例縮小。
如果有一個項目的值為0,其他項目為1,當(dāng)空間不足時,該項目不縮小。
負值對該屬性無效,容器不應(yīng)該設(shè)置flex-wrap。
.item{ flex-shrink: <非負整數(shù)>; }
如果一個項目設(shè)置flex-shrink為0;而其他項目都為1,則空間不足時,該項目不縮?。?/p>
如果所有項目都為0,則當(dāng)空間不足時,項目撐破容器而溢出:
如果設(shè)置項目的flex-shrink不為0的非負數(shù)效果同設(shè)置為1:
4、flex-basis屬性:定義在分配多余空間之前,項目占據(jù)的主軸空間
默認值為auto,瀏覽器根據(jù)此屬性檢查主軸是否有多余空間。
.item{ flex-basis: <auto或者px>; }
注意設(shè)置的flex-basis是分配多余空間之前項目占據(jù)的主軸空間,如果空間不足則默認情況下該項目也會縮小。
設(shè)置flex-basis為350px,但空間充足:
空間不足,項目縮小,小于設(shè)定值:
5、flex屬性:是flex-grow,flex-shrink和flex-basis的簡寫
默認值為0 1 auto,第一個屬性必須,后兩個屬性可選。
.item{ flex: none | [<flex-grow><flex-shrink><flex-basis>]; }
- 可以用 flex:auto; 代替 flex: 1 1 auto;
- 可以用 flex: none; 代替 flex: 0 0 auto;
6、align-self屬性:允許單個項目與其他項目有不一樣的對齊方式
默認值為auto,表示繼承父元素的align-items屬性,并可以覆蓋align-items屬性。
.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }
彈性布局相關(guān)Demo源碼:
https://dxz.jb51.net/202306/yuanma/DisplayFlexDemo_jb51.rar
相關(guān)文章
- 本文給大家整理了CSS中display flex(布局利器) 的相關(guān)知識,本文通過實例截圖的形式給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友參考下吧2020-02-05
詳解CSS中的display:flex||inline-flex屬性
這篇文章主要給大家介紹了CSS中的display:flex和display:inline-flex屬性,文中分別通過兩段實例代碼給大家介紹了display:flex和display:inline-flex的使用效果,感興趣的2016-12-20