Flex布局

wing324 發(fā)布于2019-08-23 11:55 / 2295人閱讀

摘要：一的基本概念采用布局的元素，稱為容器，簡(jiǎn)稱容器。容器默認(rèn)存在兩根軸默認(rèn)水平的為主軸和垂直的為交叉軸。單個(gè)項(xiàng)目占據(jù)的主軸空間叫做，占據(jù)的交叉軸空間叫做。屬性屬性定義項(xiàng)目在交叉軸上如何對(duì)齊。

Flex 布局，可以實(shí)現(xiàn)各種頁(yè)面布局。目前，它已經(jīng)得到了所有瀏覽器的支持。Webkit 內(nèi)核的瀏覽器，必須加上-webkit前綴。
Flex 是 Flexible Box 的縮寫(xiě)，意為"彈性布局"。

一、Flex的基本概念

采用 Flex 布局的元素，稱為 Flex 容器（flex container），簡(jiǎn)稱"容器"。它的所有子元素自動(dòng)成為容器成員，稱為 Flex 項(xiàng)目（flex item），簡(jiǎn)稱"項(xiàng)目"。

容器默認(rèn)存在兩根軸：默認(rèn)水平的為主軸（main axis）和垂直的為交叉軸（cross axis）。主軸的開(kāi)始位置叫做main start，結(jié)束位置叫做main end；交叉軸的開(kāi)始位置叫做cross start，結(jié)束位置叫做cross end。
項(xiàng)目默認(rèn)沿主軸排列。單個(gè)項(xiàng)目占據(jù)的主軸空間叫做main size，占據(jù)的交叉軸空間叫做cross size。

需要注意的是：當(dāng)元素設(shè)為 Flex 布局以后，子元素的float、clear和vertical-align屬性將失效。

二、將元素指定為Flex布局

可以將任何容器指定為Flex布局

.box{
  display: flex;
}

行內(nèi)元素也可以使用 Flex 布局。

.box{
   display: inline-flex;
}

Webkit 內(nèi)核的瀏覽器，必須加上-webkit前綴。

.box{
   display: -webkit-flex; /* Safari */
   display: flex;
}

三、容器屬性詳述

容器的屬性有6個(gè)。

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

1.flex-direction

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

可能有4個(gè)值

row（默認(rèn)值）:主軸為水平方向，項(xiàng)目沿主軸從左至右排列

column：主軸為豎直方向，項(xiàng)目沿主軸從上至下排列

row-reverse：主軸水平，項(xiàng)目從右至左排列，與row反向

column-reverse：主軸豎直，項(xiàng)目從下至上排列，與column反向

.container{
    width: 100px;
    height: 100px;
    border: 1px solid black;
    border-radius: 10px;
}
.item{
    margin-left: 1px;
    margin-top: 1px;
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid black;
    border-radius: 20px;
    background: black;
    color: red;
    text-align: center;
}
 
    1 
    2
    3
    4
    5
    6

.container{
    display: flex;
    border: 1px solid black;
    border-radius: 5px;
    flex-direction: column;
}

2.flex-wrap屬性

默認(rèn)情況下，項(xiàng)目都排在一條線上，即主軸上。flex-wrap屬性定義，當(dāng)一條軸線排不下時(shí)，是否換行和方式。

可能有3個(gè)值

nowrap（默認(rèn)）

wrap

wrap-reverse

3.flex-flow

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫(xiě)形式，默認(rèn)值為row nowrap。

4.justify-content屬性

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

可能的值有：flex-start（默認(rèn)），flex-end，center，space-between，space-around。當(dāng)主軸沿水平方向時(shí)，具體含義為

flex-start（默認(rèn)值）：左對(duì)齊

flex-end：右對(duì)齊

center：居中對(duì)齊

space-between：兩端對(duì)齊，項(xiàng)目之間的間隔都相等。

space-around：每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等。所以，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍。

5.align-items屬性

align-items屬性定義項(xiàng)目在交叉軸上如何對(duì)齊。

可能的值有：

flex-start：交叉軸的起點(diǎn)對(duì)齊

flex-end：交叉軸的終點(diǎn)對(duì)齊

center：交叉軸的中點(diǎn)對(duì)齊

baseline：項(xiàng)目的第一行文字的基線對(duì)齊

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

6.align-content屬性

align-content屬性定義了多根軸線（即item不止一行時(shí)）的對(duì)齊方式。如果項(xiàng)目只有一根軸線，該屬性不起作用。
注意當(dāng)有多行時(shí)，定義了align-content后，align-items屬性將失效。align-content可能值含義如下（假設(shè)主軸為水平方向）：

flex-start：與交叉軸的起點(diǎn)對(duì)齊

flex-end：與交叉軸的終點(diǎn)對(duì)齊

center：與交叉軸的中點(diǎn)對(duì)齊

space- between：與交叉軸兩端對(duì)齊，軸線之間的間隔平均分布

space-around：每根軸線兩側(cè)的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍

stretch（默認(rèn)值）：軸線占滿整個(gè)交叉軸

四、項(xiàng)目屬性詳述

項(xiàng)目一共有六個(gè)屬性：

order

flex-grow

flex-shrink

flex-basis

flex

align-self

1.order屬性

order的值是整數(shù)，默認(rèn)為0，整數(shù)越小，item排列越靠前。

 .item:nth-child(1){
    order: 4;
 }
 .item:nth-child(1){
    order: 3;
 }
 .item:nth-child(1){
    order: 2;
 }
 .item:nth-child(1){
    order: 1;
 }


    1 
    2
    3
    4
    5
    6

2.flex-grow屬性

定義了當(dāng)flex容器有多余空間時(shí)，item是否放大。默認(rèn)值為0，即當(dāng)有多余空間時(shí)也不放大；可能的值為整數(shù)，表示不同item的放大比例。

注意：當(dāng)在容器中定義了flex-wrap: nowrap，而且空間不足的情況下，則沒(méi)有放大的效果。

3.flex-shrink

定義了當(dāng)容器空間不足時(shí)，item是否縮小。默認(rèn)值為1，表示當(dāng)空間不足時(shí)，item自動(dòng)縮小，其可能的值為整數(shù)，表示不同item的縮小比例。

如果所有項(xiàng)目的flex-shrink屬性都為1，當(dāng)空間不足時(shí)，都將等比例縮小。如果一個(gè)項(xiàng)目的flex-shrink屬性為0，其他項(xiàng)目都為1，則空間不足時(shí)，前者不縮小。

負(fù)值對(duì)該屬性無(wú)效。

注意：當(dāng)在容器中定義了flex-wrap: wrap，表示空間足夠，則沒(méi)有縮小的效果。

4.flex-basis屬性

flex-basis屬性定義項(xiàng)目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間。它的默認(rèn)值為auto，即項(xiàng)目的本來(lái)大小。

5.flex屬性

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫(xiě)，默認(rèn)值為0 1 auto。后兩個(gè)屬性可選。

6.align-self屬性

align-self屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋align-items屬性。默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒(méi)有父元素，則等同于stretch。

auto：和父元素align-items的值一致

flex-start：交叉軸的起點(diǎn)對(duì)齊

flex-end：交叉軸的終點(diǎn)對(duì)齊

center：交叉軸的中點(diǎn)對(duì)齊

baseline：項(xiàng)目的第一行文字的基線對(duì)齊

stretch：如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿整個(gè)容器的高度

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/97683.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

wing324

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

實(shí)現(xiàn)出棧入棧以及獲取棧中最小值，主要是獲取最小值

閱讀 3056·2021-11-24 09:39
2021最新jmeter接口測(cè)試入門到精通實(shí)戰(zhàn)講解，手把手教學(xué)

閱讀 2989·2021-09-29 09:34
RUNIDC：香港E3服務(wù)器$30/月起,臺(tái)灣E3服務(wù)器$50/月起

閱讀 3738·2021-09-24 10:23
如何計(jì)算網(wǎng)絡(luò)號(hào)和主機(jī)號(hào)-如何計(jì)算IP地址的網(wǎng)絡(luò)號(hào)和主機(jī)號(hào)？

閱讀 1840·2021-09-22 15:41
解決移動(dòng)端一像素問(wèn)題的Vue指令

閱讀 1781·2019-08-30 15:55
提高開(kāi)發(fā)效率之VS Code基礎(chǔ)配置篇

閱讀 3582·2019-08-30 13:58
CSS3 transform 詳解

閱讀 2724·2019-08-30 13:11
CSS3新特性學(xué)習(xí)

閱讀 1733·2019-08-29 12:31

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

Flex布局

相關(guān)文章

**CSS6：flex布局**

結(jié)合CSS3的布局新特征談?wù)劤Ｒ?jiàn)布局方法

結(jié)合CSS3的布局新特征談?wù)劤Ｒ?jiàn)布局方法

**幾種常見(jiàn)布局的flex寫(xiě)法**

**我所知道的flex布局 —— 上篇**

**CSS Flex 布局：用 Flex 來(lái)實(shí)現(xiàn)圣杯布局**

發(fā)表評(píng)論

0條評(píng)論

wing324

男|高級(jí)講師

TA的文章

實(shí)現(xiàn)出棧入棧以及獲取棧中最小值，主要是獲取最小值

2021最新jmeter接口測(cè)試入門到精通實(shí)戰(zhàn)講解，手把手教學(xué)

RUNIDC：香港E3服務(wù)器$30/月起,臺(tái)灣E3服務(wù)器$50/月起

如何計(jì)算網(wǎng)絡(luò)號(hào)和主機(jī)號(hào)-如何計(jì)算IP地址的網(wǎng)絡(luò)號(hào)和主機(jī)號(hào)？

解決移動(dòng)端一像素問(wèn)題的Vue指令

提高開(kāi)發(fā)效率之VS Code基礎(chǔ)配置篇

CSS3 transform 詳解

CSS3新特性學(xué)習(xí)

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

Flex布局

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！