當(dāng)前位置：首頁(yè) > 前端技术 > CSS >内容正文

CSS

CSS弹性盒模型

發(fā)布時(shí)間：2024/1/1 CSS 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS弹性盒模型小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

文章目錄

- - - - 1.彈性布局與傳統(tǒng)布局相應(yīng)對(duì)比
      - 2.聲明彈性盒子
      - 3.彈性元素
      - 4.彈性元素方向
      - `flex-direction:`
      - 5.彈性元素溢出換行
      - `flex-wrap:`
      - 6.統(tǒng)一設(shè)置方向和換行
      - `flex-flow: flex-direction flex-wrap`
      - 7.軸的概念
      - （1）水平排列
        （2）垂直排列
      - 8.排列方式
      - （1）主軸元素的多種排列方式
        `justify-content:`
        （2）交叉軸元素的多種排列方式
        `align-items:`
        （3）多行元素在交叉軸的排列方式
        `align-content:`
        （4）單個(gè)元素在交叉軸的排列方式
        `align-self:`
      - 9.彈性元素可用空間分配
      - `flex-grow:`
      - 10.彈性元素動(dòng)態(tài)縮小
      - `flex-shrink:`
      - 11.主軸的基準(zhǔn)尺寸的定義
      - `flex-basis:`
      - 12.彈性元素組合規(guī)則定義
      - `flex:flex-grow flex-shrink flex-basis`
      - 13.控制彈性元素的排序
      - `order:`
      - 14.定位元素在彈性布局中的表現(xiàn)
      - （1）絕對(duì)定位
        （2）相對(duì)定位
      - 15.彈性布局中使用`margin`自動(dòng)撐滿空間

Flex 是 Flexible Box 的縮寫，意為"彈性布局"，可以輕松的控制元素排列、對(duì)齊和順序。

現(xiàn)在的終端類型非常多，使用彈性盒模型可以讓元素在不同尺寸終端控制尺寸。

1.彈性布局與傳統(tǒng)布局相應(yīng)對(duì)比

<body><main><nav>Yooo</nav><article>Alison</article></main> </body>

傳統(tǒng)布局：

* {padding: 0;margin: 0; }main {position: relative;height: 100vh; }main nav {width: 80px;position: absolute;left: 0;top: 0;bottom: 0;background: blueviolet; }main article {background: #ccc;padding-left: 90px;background-clip: content-box;height: 100vh; }

彈性布局（代碼量減小）：

* {padding: 0;margin: 0; }main {display: flex;height: 100vh; }main nav {background: blueviolet;width: 80px; }main article {background: #ddd;flex: 1; }

2.聲明彈性盒子

display:flex 塊級(jí)彈性盒子

display:inline-flex 行級(jí)彈性盒子

3.彈性元素

放在容器盒子中的元素即為彈性元素（包括文本）。

不能使用float與clear規(guī)則
彈性元素均為塊元素
絕對(duì)定位的彈性元素不參與彈性布局

4.彈性元素方向

flex-direction:

值描述

row	從左到右水平排列元素（默認(rèn)值）
row-reverse	從右向左排列元素
column	從上到下垂直排列元素
column-reverse	從下到上垂直排列元素

article {display: flex;border: solid 5px blueviolet;flex-direction: row-reverse; }

5.彈性元素溢出換行

flex-wrap:

flex-wrap 屬性規(guī)定flex容器是單行或者多行。

選項(xiàng)說明

nowrap	壓縮，元素不拆行或不拆列（默認(rèn)值）
wrap	容器元素在必要的時(shí)候拆行或拆列。
wrap-reverse	容器元素在必要的時(shí)候拆行或拆列，但是以相反的順序

article {display: flex;width: 280px;margin: 50px;border: solid 5px blueviolet;flex-direction: row;flex-wrap: wrap; }

6.統(tǒng)一設(shè)置方向和換行

flex-flow: flex-direction flex-wrap

article {display: flex;width: 280px;margin: 50px;border: solid 5px blueviolet;/* flex-direction: row;flex-wrap: wrap; */flex-flow: row wrap; }

7.軸的概念

主軸：沿著原本排列方向的那條軸。

副軸（交叉軸）：原本排列方向內(nèi)容溢出換行后與主軸垂直的軸。

（1）水平排列

（2）垂直排列

8.排列方式

（1）主軸元素的多種排列方式

justify-content:

選項(xiàng)說明

flex-start	元素緊靠主軸起點(diǎn)
flex-end	元素緊靠主軸終點(diǎn)
center	元素從彈性容器中心開始
space-between	第一個(gè)元素靠起點(diǎn)，最后一個(gè)元素靠終點(diǎn)，余下元素平均分配空間
space-around	每個(gè)元素兩側(cè)的間隔相等。所以，元素之間的間隔比元素與容器的邊距的間隔大一倍
space-evenly	元素間距離平均分配

article {display: flex;width: 550px;height: 250px;margin: 50px;border: solid 5px blueviolet;flex-flow: row wrap;justify-content: space-evenly; }

（2）交叉軸元素的多種排列方式

align-items:

控制元素在交叉軸的行上的排列

選項(xiàng)說明

stretch	元素被拉伸以適應(yīng)容器（默認(rèn)值）
center	元素位于容器的中心
flex-start	元素位于容器的交叉軸開頭
flex-end	元素位于容器的交叉軸結(jié)尾

article {display: flex;width: 550px;height: 550px;margin: 50px;border: solid 5px blueviolet;flex-direction: row;justify-content: center;align-items: center; }

（3）多行元素在交叉軸的排列方式

align-content:

只適用于多行顯示的彈性容器，用于控制行（而不是元素）在交叉軸上的排列方式。

選項(xiàng)說明

stretch	將空間平均分配給元素
flex-start	元素緊靠主軸起點(diǎn)
flex-end	元素緊靠主軸終點(diǎn)
center	元素從彈性容器中心開始
space-between	第一個(gè)元素靠起點(diǎn)，最后一個(gè)元素靠終點(diǎn)，余下元素平均分配空間
space-around	每個(gè)元素兩側(cè)的間隔相等。所以，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍
space-evenly	元素間距離平均分配

（4）單個(gè)元素在交叉軸的排列方式

align-self:

用于控制單個(gè)元素在交叉軸上的排列方式，align-items 用于控制容器中所有元素的排列，而 align-self 用于控制一個(gè)彈性元素的交叉軸排列。

選項(xiàng)說明

stretch	將空間平均分配給元素
flex-start	元素緊靠主軸起點(diǎn)
flex-end	元素緊靠主軸終點(diǎn)
center	元素從彈性容器中心開始

article :first-child {align-self: flex-start; }

9.彈性元素可用空間分配

flex-grow:

用于將彈性盒子的可用空間，分配給彈性元素?？梢允褂谜麛?shù)或小數(shù)聲明。（計(jì)算：剩余的空間按照比例平分）

article div:nth-child(1) {flex-grow: 0; }article div:nth-child(2) {flex-grow: 1; }article div:nth-child(3) {flex-grow: 3; }

10.彈性元素動(dòng)態(tài)縮小

flex-shrink:

與 flex-grow 相反 flex-shrink 是在彈性盒子裝不下元素時(shí)定義的縮小值。

article div:nth-child(1) {flex-shrink: 0; }article div:nth-child(2) {flex-shrink: 1; }article div:nth-child(3) {flex-shrink: 3; }

11.主軸的基準(zhǔn)尺寸的定義

flex-basis:

flex-basis 屬性定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間。

優(yōu)先級(jí)：max-width(height)/min-width(height)>flex-basis>width/height

article * {flex-basis: 100px;width: 100px;height: 50px;background: red;background-clip: content-box;padding: 10px;box-sizing: border-box;font-size: 35px;color: white;border: solid 1px blueviolet; }

12.彈性元素組合規(guī)則定義

flex:flex-grow flex-shrink flex-basis

13.控制彈性元素的排序

order:

用于控制彈性元素的位置，默認(rèn)為 order:0 。數(shù)值越小越在前面，可以負(fù)數(shù)或整數(shù)。

article :nth-child(1) {order: 1; }article :nth-child(2) {order: 2; }article :nth-child(3) {order: -5; }

14.定位元素在彈性布局中的表現(xiàn)

（1）絕對(duì)定位

絕對(duì)定位的彈性元素不參與彈性布局

article :nth-child(1) {background-color: #000;position: absolute;left: 100px;top: 200px; }

（2）相對(duì)定位

相對(duì)定位的元素因?yàn)楸Ａ粑恢?#xff0c;所以參與布局。

article :nth-child(1) {background-color: #000;position: relative; }

15.彈性布局中使用margin自動(dòng)撐滿空間

在彈性布局中對(duì)彈性盒子使用margin-right:auto 等形式可以自動(dòng)撐滿空間。

ul:nth-child(1) {display: flex;/* 讓菜單ul自動(dòng)填滿右側(cè) */margin-right: auto; }

總結(jié)

以上是生活随笔為你收集整理的CSS弹性盒模型的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。