欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

  發(fā)布時間:2023-06-12 16:40:03   作者: 謝友海   我要評論
Flex是Flexible Box的縮寫,翻譯成中文就是“彈性盒子”,用來為盒裝模型提供最大的靈活性,這篇文章主要介紹了前端彈性布局神器display:flex的相關(guān)知識,需要的朋友可以參考下

在進行網(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整理(布局利器)

    本文給大家整理了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

最新評論