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

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

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

在進(jìn)行網(wǎng)頁前端設(shè)計(jì)時(shí),需要垂直居中顯示文本,但CSS似乎沒有明確的垂直居中的代碼方法,由于目前的頁面不再考慮以前的瀏覽器了,因此采用CSS3的display:flex方法來實(shí)現(xiàn)?,F(xiàn)記錄一下flex屬性的相關(guān)資料。

一、flex布局是什么?

Flex是Flexible Box的縮寫,翻譯成中文就是“彈性盒子”,用來為盒裝模型提供最大的靈活性。任何一個(gè)容器都可以指定為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),簡稱“容器”。其所有子元素自動(dòng)成為容器成員,成為Flex項(xiàng)目(Flex item),簡稱“項(xiàng)目”。

容器默認(rèn)存在兩根主軸:水平方向主軸(main axis)和垂直方向交叉軸(cross axis),默認(rèn)項(xiàng)目按主軸排列。

  • main start/main end:主軸開始位置/結(jié)束位置; 
  • cross start/cross end:交叉軸開始位置/結(jié)束位置;
  • main size/cross size:單個(gè)項(xiàng)目占據(jù)主軸/交叉軸的空間;

三、容器屬性

設(shè)置在容器上的屬性有6種:

屬性名稱屬性含義
flex-direction容器內(nèi)子項(xiàng)的排列方向(默認(rèn)橫向排列)
flex-wrap容器內(nèi)子項(xiàng)換行方式
flex-flow以上兩個(gè)屬性的簡寫方式
justify-content子項(xiàng)在主軸上的對齊方式
align-items子項(xiàng)在交叉軸上如何對齊
align-content定義了多根軸線的對齊方式。如果子項(xiàng)只有一根軸線,該屬性不起作用。

1、flex-direction屬性:決定主軸的方向(即項(xiàng)目的排列方向)

.box {
   flex-direction: row | row-reverse | column | column-reverse;
}
  • row(默認(rèn)):主軸水平方向,起點(diǎn)在左端;
  • row-reverse:主軸水平方向,起點(diǎn)在右端;
  • column:主軸垂直方向,起點(diǎn)在上邊沿;
  • column-reserve:主軸垂直方向,起點(diǎn)在下邊沿。

2、flex-wrap屬性:定義換行情況

默認(rèn)情況下,項(xiàng)目都排列在一條軸線上,但有可能一條軸線排不下。

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

nowrap(默認(rèn)):不換行;

wrap:換行,第一行在上方;

wrap-reverse:換行,第一行在下方。

3、flex-flow屬性:flex-direction和flex-wrap的簡寫,默認(rèn)row nowrap

.box{
    flex-flow: <flex-direction> || <flex-wrap>;
}

4、justify-content屬性:定義項(xiàng)目在主軸上的對齊方式。

對齊方式與軸的方向有關(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(默認(rèn)值):左對齊;

flex-end:右對齊;

center:居中;

space-between:兩端對齊,項(xiàng)目之間間隔相等;

space-around:每個(gè)項(xiàng)目兩側(cè)的間隔相等,即項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍。

5、align-items屬性:定義在交叉軸上的對齊方式

對齊方式與交叉軸的方向有關(guān),假設(shè)交叉軸從下到上。

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

flex-start:起點(diǎn)對齊;

flex-end:終點(diǎn)對齊;

center:中點(diǎn)對齊;

baseline:項(xiàng)目的第一行文字的基線對齊;

stretch(默認(rèn)值):如果項(xiàng)目未設(shè)置高度或設(shè)為auto,將占滿整個(gè)容器的高度。

6、align-content屬性:定義多根軸線的對齊方式

如果項(xiàng)目只有一根軸線,該屬性不起作用。所以,容器必須設(shè)置flex-wrap:···;

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

flex-start:與交叉軸的起點(diǎn)對齊;

flex-end:與交叉軸的終點(diǎn)對齊;

center:與交叉軸的中點(diǎn)對齊;

space-between:與交叉軸的兩端對齊,軸線之間的間隔平均分布;

space-around:每根軸線兩側(cè)的間隔相等,即軸線之間的間隔比軸線與邊框的間隔大一倍;

stretch(默認(rèn)值):軸線占滿整個(gè)交叉軸。

有意思的是,當(dāng)你不給項(xiàng)目設(shè)置高度但是給容器設(shè)置align-content不為stretch時(shí),同一軸線上的項(xiàng)目的高度將等于項(xiàng)目中高度最高的項(xiàng)目。

四、項(xiàng)目的屬性

設(shè)置在項(xiàng)目上的屬性也有6個(gè):

項(xiàng)目名稱 意義與用法
 order 子項(xiàng)的排列順序。數(shù)值越小,排列越靠前,默認(rèn)為0。
 flex-grow 子項(xiàng)的放大比例,默認(rèn)為0,即如果存在剩余空間,也不放大。
 flex-shrink 子項(xiàng)的縮小比例,默認(rèn)為1,即如果空間不足,該項(xiàng)目將縮小。
 flex-basis 在分配多余空間之前,子項(xiàng)占據(jù)的主軸空間(main size)。瀏覽器根據(jù)這個(gè)屬性,計(jì)算主軸是否有多余空間。它的默認(rèn)值為auto,即項(xiàng)目的本來大小。
 flex 是flex-grow, flex-shrink 和 flex-basis的簡寫,默認(rèn)值為0 1 auto。后兩個(gè)屬性可選。
 align-self 允許單個(gè)子項(xiàng)有與其它子項(xiàng)不一樣的對齊方式,可覆蓋align-items屬性。默認(rèn)值為auto,表示繼承父元素的align-items屬性,如果沒有父元素,則等同于stretch。

子項(xiàng)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屬性:定義項(xiàng)目的排列順序

數(shù)值越小,排列越靠前,默認(rèn)為0,可以是負(fù)值。

.item {
    order: <整數(shù)>;
}

2、flex-grow屬性:定義項(xiàng)目的放大比例

默認(rèn)值為0,即如果空間有剩余,也不放大??梢允切?shù),按比例占據(jù)剩余空間。

.item{
    flex-grow: <數(shù)字>;
}

若所有項(xiàng)目的flex-grow的數(shù)值都相同,則等分剩余空間:

若果有一個(gè)項(xiàng)目flex-grow為2,其余都為1,則該項(xiàng)目占據(jù)剩余空間是其余的2倍:

3、flex-shrink屬性:定義項(xiàng)目的縮小比例

默認(rèn)值都為1,即如果空間不足將等比例縮小。

如果有一個(gè)項(xiàng)目的值為0,其他項(xiàng)目為1,當(dāng)空間不足時(shí),該項(xiàng)目不縮小。

負(fù)值對該屬性無效,容器不應(yīng)該設(shè)置flex-wrap。

.item{
    flex-shrink: <非負(fù)整數(shù)>;
}

如果一個(gè)項(xiàng)目設(shè)置flex-shrink為0;而其他項(xiàng)目都為1,則空間不足時(shí),該項(xiàng)目不縮小:

如果所有項(xiàng)目都為0,則當(dāng)空間不足時(shí),項(xiàng)目撐破容器而溢出:

如果設(shè)置項(xiàng)目的flex-shrink不為0的非負(fù)數(shù)效果同設(shè)置為1:

4、flex-basis屬性:定義在分配多余空間之前,項(xiàng)目占據(jù)的主軸空間

默認(rèn)值為auto,瀏覽器根據(jù)此屬性檢查主軸是否有多余空間。

.item{
    flex-basis:  <auto或者px>;
}

注意設(shè)置的flex-basis是分配多余空間之前項(xiàng)目占據(jù)的主軸空間,如果空間不足則默認(rèn)情況下該項(xiàng)目也會縮小。

設(shè)置flex-basis為350px,但空間充足:

空間不足,項(xiàng)目縮小,小于設(shè)定值:

5、flex屬性:是flex-grow,flex-shrink和flex-basis的簡寫

默認(rèn)值為0 1 auto,第一個(gè)屬性必須,后兩個(gè)屬性可選。

.item{
    flex: none | [<flex-grow><flex-shrink><flex-basis>];
}
  • 可以用 flex:auto; 代替 flex: 1 1 auto;
  • 可以用 flex: none; 代替 flex: 0 0 auto;

6、align-self屬性:允許單個(gè)項(xiàng)目與其他項(xiàng)目有不一樣的對齊方式

默認(rèn)值為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)知識,本文通過實(shí)例截圖的形式給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
    2020-02-05
  • 詳解CSS中的display:flex||inline-flex屬性

    這篇文章主要給大家介紹了CSS中的display:flex和display:inline-flex屬性,文中分別通過兩段實(shí)例代碼給大家介紹了display:flex和display:inline-flex的使用效果,感興趣的
    2016-12-20

最新評論