web前端入門到實(shí)戰(zhàn)：CSS3中的彈性盒子模型

發(fā)布時(shí)間：2020-03-04 04:11:12 來源：網(wǎng)絡(luò) 閱讀：268 作者：前端向南欄目：web開發(fā)

介紹

在css2當(dāng)中，存在標(biāo)準(zhǔn)模式下的盒子模型和IE下的怪異盒子模型。這兩種方案表示的是一種盒子模型的渲染模式。而在css3當(dāng)中，新增加了彈性盒子模型，彈性盒子模型是一種新增加的強(qiáng)大的、靈活的布局方案。彈性盒子模型是css3中新提出的一種布局方案。是一種為了應(yīng)對針對不同屏幕寬度不同設(shè)備的一整套新的布局方案。主要是對一個(gè)容器中的子元素進(jìn)行排列、對齊和分配空白空間的方案的調(diào)整。

新舊版本的彈性盒子模型
在之前，css3曾經(jīng)推出過舊版本的彈性盒子模型。相對于新版本的彈性盒子模型而言，舊版本的內(nèi)容與新版本還是有些出入。而且，從功能上來講，舊版本的彈性盒子模型遠(yuǎn)遠(yuǎn)沒有新版本的盒子模型強(qiáng)大，從兼容性來講，二者在pc端ie9以下都存在著兼容性問題，但是在移動(dòng)端，舊版本的彈性盒子模型兼容性則更好一點(diǎn)。但是對于我們來說，我們依然要將主要的精力放在新版本的彈性盒子模型的身上，因?yàn)榕f版本的彈性盒子模型淘汰是必然，隨著手機(jī)端的兼容性逐漸提升，舊版本必將被淘汰。另外，新版本具有更加強(qiáng)大的功能，也值得我們進(jìn)行深度的學(xué)習(xí)。那么我們對于新舊兩個(gè)版本的彈性盒子模型，我們只需要抱著對比的心態(tài)學(xué)習(xí)即可，掌握新版本，了解舊版本，這樣即使有一天我們需要使用舊版本，也可以非常容易的學(xué)習(xí)舊版本的彈性盒子模型。

相關(guān)概念

主軸

我們以元素排在一行為例，當(dāng)元素排列在一行的時(shí)候，主軸既表示元素排列的方向，橫向排列則主軸即可以理解為一條橫線，又因?yàn)槲覀冊啬J(rèn)是從左向右排列，那么我們可以說在默認(rèn)的情況下，元素的主軸的起始位置是在左，而方向?yàn)橛遥K點(diǎn)也為右。

側(cè)軸

元素垂直的方向即為側(cè)軸。默認(rèn)上為起點(diǎn)，下為終點(diǎn)。

彈性容器

我們想要使用彈性盒子模型，就需要將容器轉(zhuǎn)換為彈性容器，我們說一個(gè)包含于子元素的容器設(shè)置了display:flex，那么這個(gè)容器也就變成了彈性容器。

彈性子元素

當(dāng)子元素的父元素變成了彈性容器，那么其中的所有的子元素也自然而然的變成了彈性子元素。

如何創(chuàng)建一個(gè)彈性容器：

display:flex | inline-flex

彈性容器屬性

flex-direction

彈性容器中子元素的排列方式(主軸排列方式)
屬性值：

row:默認(rèn)在一行排列
row-reverse:反轉(zhuǎn)橫向排列（右對齊，從后往前排，最后一項(xiàng)排在最前面。）
column：縱向排列。
column-reverse：反轉(zhuǎn)縱向排列，從下往上排，最后一項(xiàng)排在最上面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex-direction</title>
    <style>
        html,body {
            margin:0;
            padding:0;
        }
        nav {
            height: 500px;
            background-color: lightcyan;
            display: flex;
            flex-direction: row-reverse;/*居左1234 變成居右4321*/
            flex-direction: column;/*居左1234變成上下1234*/
            flex-direction: column-reverse;/*變成下上1234*/
        }
        nav div {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            line-height: 100px;
            text-align: center;
            font-weight: bold;
            margin-right: 10px;
        }
    </style>
</head>
<body>

<nav>
    <div class="d1">1</div>
    <div class="d2">2</div>
    <div class="d3">3</div>
    <div class="d4">4</div>
</nav>

</body>
</html>
專門建立的學(xué)習(xí)Q-q-u-n ⑦⑧④-⑦⑧③-零①②  分享學(xué)習(xí)方法和需要注意的小細(xì)節(jié)，互相交流學(xué)習(xí)，不停更新最新的教程和學(xué)習(xí)技巧（從零基礎(chǔ)開始到WEB前端項(xiàng)目實(shí)戰(zhàn)教程，學(xué)習(xí)工具，全棧開發(fā)學(xué)習(xí)路線以及規(guī)劃）

flex-wrap

設(shè)置彈性盒子的子元素超出父容器時(shí)是否換行
屬性值：

nowrap: 默認(rèn)值。規(guī)定元素不拆行或不拆列。
wrap:規(guī)定元素在必要的時(shí)候拆行或拆列。
wrap-reverse:規(guī)定元素在必要的時(shí)候拆行或拆列，但是以相反的順序。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex-wrap</title>
    <style>
        .box {
            height: 600px;
            background-color: lightgoldenrodyellow;
            display: flex;
            /*設(shè)置了屬性為wrap，那么一行放不下的時(shí)候會(huì)自動(dòng)的去下一行*/
            /*flex-wrap:wrap;*/
            /*設(shè)置了屬性為wrap-reverse會(huì)讓排序發(fā)生一個(gè)反轉(zhuǎn)，雖然同樣是多行，但是會(huì)變成從下到上*/
            flex-wrap: wrap-reverse;
        }
        .box div {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            line-height: 100px;
            text-align: center;
            font-weight: bold;
            margin: 10px;
        }
    </style>
</head>
<body>

<div class="box">
    <!--此時(shí)元素如果不換行，那么當(dāng)一行的整體放不下時(shí)，每個(gè)元素就會(huì)相應(yīng)的縮小-->
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</div>
</body>
</html>

flex-flow

flex-direction 和 flex-wrap 的簡寫

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex-wrap</title>
    <style>
        .box {
            height: 600px;
            background-color: lightgoldenrodyellow;
            display: flex;
            flex-flow: row wrap;
        }
        .box div {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            line-height: 100px;
            text-align: center;
            font-weight: bold;
            margin: 10px;
        }
    </style>
</head>
<body>

<div class="box">
    <!--此時(shí)元素如果不換行，那么當(dāng)一行的整體放不下時(shí)，每個(gè)元素就會(huì)相應(yīng)的縮小-->
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</div>

</body>
</html>

align-item

設(shè)置彈性盒子元素在側(cè)軸（縱軸）方向上的對齊方式
相關(guān)屬性值：

flex-start：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸起始邊界。
flex-end：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸結(jié)束邊界。
center：彈性盒子元素在該行的側(cè)軸（縱軸）上居中放置。（如果該行的尺寸小于彈性盒子元素的尺寸，則會(huì)向兩個(gè)方向溢出相同的長度）。
baseline：如彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對齊。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>align-item</title>
    <style>
        .box {
            height: 600px;
            background-color: lemonchiffon;
            display: flex;
            /*默認(rèn) 側(cè)軸起點(diǎn)橫向排列*/
            /*align-items: flex-start;*/
            /*側(cè)軸終點(diǎn)橫向排列*/
            /*align-items: flex-end;*/
            /*側(cè)軸終點(diǎn)橫向排列*/
            /*align-items: center;*/
            align-items: baseline;
        }
        .box div{
            width: 100px;
            height: 100px;
            background-color: lightsalmon;
            text-align: center;
            line-height: 100px;
            font-weight: bold;
            margin:10px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>

align-content

修改 flex-wrap 屬性的行為，類似 align-items, 但不是設(shè)置子元素對齊，而是設(shè)置行對齊(行與行的對其方式).
相關(guān)屬性：

flex-start：沒有行間距
flex-end：底對齊沒有行間距
center ：居中沒有行間距
space-between：兩端對齊，中間自動(dòng)分配
space-around：自動(dòng)分配距離

請注意本屬性在只有一行的伸縮容器上沒有效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>align-content</title>
    <style>
        nav {
            height: 600px;
            background-color: lemonchiffon;
            display: flex;
            /*開啟多行*/
            flex-wrap: wrap;
            /*側(cè)軸起點(diǎn)上下兩行對齊，沒有行間距*/
            /*align-content: flex-start;*/
            /*側(cè)軸終點(diǎn)上下兩行對齊，沒有行間距，第一行依然在上*/
            /*align-content: flex-end;*/
            /*側(cè)軸終點(diǎn)對齊，第一行依然在上，沒有行間距*/
            /*align-content:center;*/
            /*兩端對齊，中間自動(dòng)分配*/
            /*align-content: space-between;*/
            /*自動(dòng)分配距離*/
            align-content:space-around;
        }
        nav div {
            width: 100px;
            height: 100px;
            background-color: lightcoral;
            margin:10px;
        }
    </style>
</head>
<body>
    <nav>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
        <div>13</div>
    </nav>
</body>
</html>

justify-content

設(shè)置彈性盒子元素在主軸（橫軸）方向上的對齊方式
相關(guān)屬性：

flex-star：t默認(rèn)，頂端對齊
flex-end：末端對齊
center：居中對齊
space-between：兩端對齊，中間自動(dòng)分配
space-around：自動(dòng)分配距離

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>justify-content</title>
    <style>
        nav {
            height: 600px;
            background-color: lightgoldenrodyellow;
            display: flex;
            /*justify-content: flex-start;*/
            /*主軸對齊，貼右 1234*/
            /*justify-content: flex-end;*/
            /*主軸對齊，居中*/
            /*justify-content: center;*/
            /*兩端對齊，中間自動(dòng)分配*/
            /*justify-content: space-between;*/
            /*自動(dòng)分配距離*/
            justify-content: space-around;
        }
        nav div {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            margin:10px;
        }
    </style>
</head>
<body>
<nav>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</nav>
</body>
</html>
專門建立的學(xué)習(xí)Q-q-u-n ⑦⑧④-⑦⑧③-零①②  分享學(xué)習(xí)方法和需要注意的小細(xì)節(jié)，互相交流學(xué)習(xí)，不停更新最新的教程和學(xué)習(xí)技巧（從零基礎(chǔ)開始到WEB前端項(xiàng)目實(shí)戰(zhàn)教程，學(xué)習(xí)工具，全棧開發(fā)學(xué)習(xí)路線以及規(guī)劃）

彈性子元素屬性

order

設(shè)置彈性盒子的子元素排列順序。 number排序優(yōu)先級(jí)，數(shù)字越大越往后排，默認(rèn)為0，支持負(fù)數(shù)。

flex-grow

設(shè)置或檢索彈性盒子元素的擴(kuò)展比率。

flex-shrink

設(shè)置或檢索彈性盒子元素的收縮比率。

flex-basis

用于設(shè)置或檢索彈性盒伸縮基準(zhǔn)值

flex

設(shè)置彈性盒子的子元素如何分配空間,是 flex-grow、flex-shrink 和 flex-basis 屬性的簡寫屬性

align-self

在彈性子元素上使用。覆蓋容器的 align-items 屬性。值與容器屬性一樣，只是這個(gè)是單獨(dú)的設(shè)置某個(gè)元素。

向AI問一下細(xì)節(jié)

web前端入門到實(shí)戰(zhàn)：CSS3中的彈性盒子模型

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽