flex布局制作自適應(yīng)網(wǎng)頁

時(shí)間：2023-08-28 23:18:02 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-08-28 23:18:02 來源：網(wǎng)站運(yùn)營

flex布局制作自適應(yīng)網(wǎng)頁：網(wǎng)頁布局是css的一個(gè)重點(diǎn)應(yīng)用。傳統(tǒng)的布局都是依賴display、position、float屬性來實(shí)現(xiàn)的，但是特殊布局就不易實(shí)現(xiàn)，如垂直居中。

flex布局是什么？?

Flex 是 Flexible Box的簡(jiǎn)寫，意為“彈性布局”為盒模型提供最大靈活性。任何一個(gè)容器都可以指定為flex布局。

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







容器默認(rèn)存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點(diǎn)）叫做main start，結(jié)束位置叫做main end；交叉軸的開始位置叫做cross start，結(jié)束位置叫做cross end。

項(xiàng)目默認(rèn)沿主軸排列。單個(gè)項(xiàng)目占據(jù)的主軸空間叫做main size，占據(jù)的交叉軸空間叫做cross size。

容器的屬性

• flex-direction 設(shè)置排列方向(向下、向上、向左、向右)的
• flex-wrap 內(nèi)容放置不下時(shí)換行方式
• flex-flow 是flex-direction和flex-wrap屬性簡(jiǎn)寫默認(rèn)值row nowrap
• justify-content 定義在主軸上的對(duì)齊方式。
• align-items 定義項(xiàng)目在交叉軸上如何對(duì)齊。
• align-content 定義多根軸線的對(duì)齊方式

flex-direction屬性值有四個(gè)：

• row(默認(rèn)值)：水平方向，從左到右，起點(diǎn)在左。
• row-reverse：水平方向，從右到左，起點(diǎn)在右。
• column：垂直方向，從上到下。
• column-reverse：垂直方向，從下到上。

flex-wrap屬性值有三個(gè)：

• nowrap：不換行。
• wrap：正常換行，在第一行下方。
• wrap-reverse：換行，在第一行上方。

justify-content屬性值有五個(gè)：

• flex-start(默認(rèn)值)：左對(duì)齊
• flex-end：右對(duì)齊
• center：居中
• space-between：兩端對(duì)齊
• space-around：每個(gè)項(xiàng)目兩側(cè)的間隔相等。

align-items屬性值有五個(gè)：

• 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è)容器的高度。

align-content屬性值六個(gè)：

• 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)目屬性

• order：定義項(xiàng)目的排列順序，數(shù)值越小，排列越靠前，默認(rèn)為0。
• flex-grow屬性：定義項(xiàng)目的放大比例，默認(rèn)為0
• flex-shrink：定義項(xiàng)目的縮小比例，默認(rèn)為1。
• flex-basis：定義在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間。默認(rèn)值為auto，即項(xiàng)目本來大小。
• flex：是flex-grow、flex-shrink、flex-basis的縮寫，默認(rèn)值0 1 auto。
• align-self：屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋align-items屬性。默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。