flex布局詳解

本文轉載自查看原文 2021-12-29 15:57 1557 CSS/CSS3/ 前端

一、Flex布局是什么？🔥

Flex 是 Flexible Box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。

任何一個容器都可以指定為flex布局：

.box{ display: flex;
}

行內元素也可以使用 Flex 布局：

.box{ display: inline-flex;
}

Webkit 內核的瀏覽器，必須加上-webkit前綴：

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

🌀Flex布局與傳統布局對比：

傳統布局：

兼容性好
布局繁瑣
局限（不能在移動端很好的布局）

FLex布局：

操作方便，布局簡單，移動端廣泛應用
PC端瀏覽器支持較差
IE11或更低版本不支持或部分支持

🌀Flex布局原理：

--通過給父元素添加flex屬性來控制子元素的位置和排列方式

🔺注意：設為 Flex 布局以后，子元素的float、clear和vertical-align屬性將失效。

二、基本概念🔥

采用 Flex 布局的元素，稱為 Flex 容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為 Flex 項目（flex item），簡稱"項目"。

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

項目默認沿主軸排列，單個項目占據的主軸空間叫做main size，占據的交叉軸空間叫做cross size

三、容器屬性🔥

1）flex-direction：設置主軸方向

2）justify-content：設置主軸上的子元素排列方式

3）flex-wrap：設置子元素是否換行

4）align-content：設置側軸上子元素排列方式（多行）

5）align-items：設置側軸上子元素排列方式（單行）

6）flex-flow：復合屬性，同時設置了flex-direction和flex-wrap

3.1 flex-direction🚩

flex-direction屬性決定主軸的方向（即項目的排列方向）

語法：

.box { flex-direction: row | row-reverse | column | column-reverse;
}

屬性值：

row：默認值，主軸為水平方向，起點在左端。
row-reverse：主軸為水平方向，起點在右端。
column：主軸為垂直方向，起點在上沿。
column-reverse：主軸為垂直方向，起點在下沿。

完整示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .container{
                border: 1px solid #000000;
                width: 500px;
                height: 600px;
                margin: 0 auto;
                /* 定義flex容器 */
                display: flex;
                /* 設置容器內部元素排列方向 */
                flex-direction: row;
            }
            .box{
                width: 120px;
                height: 120px;
            }
            .red{
                background-color: red;
            }
            .blue{
                background-color: blue;
            }
            .green{
                background-color: green;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="box red">1</div>
            <div class="box blue">2</div>
            <div class="box green">3</div>
        </div>
    </body>
</html>

示例效果：

3.2 flex-wrap🚩

默認情況下，項目都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。

語法：

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

屬性值：

nowrap（默認）：不換行
wrap：換行，第一行在上方
wrap-reverse：換行，第一行在下方

完整示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .container{
                border: 1px solid #000000;
                width: 500px;
                height: 600px;
                margin: 0 auto;
                /* 定義flex容器 */
                display: flex;
                /* 設置容器內部元素排列方向 */
                flex-direction: row;
                /* 設置容器內部元素如何換行 */
                flex-wrap: nowrap|wrap|wrap-reverse;
            }
            .box{
                width: 120px;
                height: 120px;
            }
            .red{
                background-color: red;
            }
            .blue{
                background-color: blue;
            }
            .green{
                background-color: green;
            }
            .yellow{
                background-color: yellow;
            }
            .orange{
                background-color: orange;
            }
            .pink{
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="box red">1</div>
            <div class="box blue">2</div>
            <div class="box green">3</div>
            <div class="box yellow">4</div>
            <div class="box orange">5</div>
            <div class="box pink">6</div>
        </div>
    </body>
</html>

示例效果：

3.3 flex-flow🚩

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap

語法：

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

.box{
  flex-direction: row;
  flex-wrap: wrap-reverse; 
  /* 等同於 */
  flex-flow:row wrap-reverse     
}

3.4 justify-content🚩

justify-content屬性定義了項目在主軸上的對齊方式

語法：

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

屬性值：

flex-start（默認值）：左對齊
flex-end：右對齊
center：居中
space-between：兩端對齊，項目之間的間隔都相等
space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍
space-evenly：均勻排列每個元素，每個元素之間的間隔相等

完整示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .container{
                border: 1px solid #000000;
                width: 500px;
                height: 600px;
                margin: 0 auto;
                /* 定義flex容器 */
                display: flex;
                /* 設置容器內部元素排列方向 */
                flex-direction: row;
                /* 設置容器內部元素如何換行 */
                flex-wrap: wrap;
                /* 定義項目在主軸上的對齊方式 */
                justify-content: flex-start | flex-end | center | space-between | space-around;
            }
            .box{
                width: 120px;
                height: 120px;
            }
            .red{
                background-color: red;
            }
            .blue{
                background-color: blue;
            }
            .green{
                background-color: green;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="box red">1</div>
            <div class="box blue">2</div>
            <div class="box green">3</div>
        </div>
    </body>
</html>

示例效果：

3.5 align-items🚩

align-items屬性定義項目在交叉軸上如何對齊

語法：

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

屬性值：

flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊。
center：交叉軸的中點對齊。
baseline: 項目的第一行文字的基線對齊。
stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。

完整示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .container{
                border: 1px solid #000000;
                width: 500px;
                height: 600px;
                margin: 0 auto;
                /* 定義flex容器 */
                display: flex;
                /* 設置容器內部元素排列方向 */
                flex-direction: row;
                /* 設置容器內部元素如何換行 */
                flex-wrap: wrap;
                /* 定義項目在交叉軸上的對齊方式 */
                align-items: flex-start | flex-end | center | baseline | stretch;
            }
            .box{
                width: 120px;
                height: 120px;
            }
            .red{
                background-color: red;
            }
            .blue{
                background-color: blue;
            }
            .green{
                background-color: green;
            }
            /* .yellow{
                background-color: yellow;
            }
            .orange{
                background-color: orange;
            }
            .pink{
                background-color: pink;
            } */
        </style>
    </head>
    <body>
        <div class="container">
            <div class="box red">1</div>
            <div class="box blue">2</div>
            <div class="box green">3</div>
            <!-- <div class="box yellow">4</div>
            <div class="box orange">5</div>
            <div class="box pink">6</div> -->
        </div>
    </body>
</html>

示例效果：

3.6 align-content🚩

align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用

語法：

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

屬性值：

flex-start：與交叉軸的起點對齊。
flex-end：與交叉軸的終點對齊。
center：與交叉軸的中點對齊。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（默認值）：軸線占滿整個交叉軸。

完整示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .container{
                border: 1px solid #000000;
                width: 500px;
                height: 600px;
                margin: 0 auto;
                /* 定義flex容器 */
                display: flex;
                /* 設置容器內部元素排列方向 */
                flex-direction: row;
                /* 設置容器內部元素如何換行 */
                flex-wrap: wrap;
                /* 定義多根軸線的對齊方式(只有一行不起作用) */
                align-content: flex-start | flex-end | center | space-between | space-around | stretch;
            }
            .box{
                width: 120px;
                height: 120px;
                
            }
            .red{
                background-color: red;
                font-size: 25px;
            }
            .blue{
                background-color: blue;
                font-size: 30px;
            }
            .green{
                background-color: green;
                font-size: 45px;
            }
            .yellow{
                background-color: yellow;
            }
            .orange{
                background-color: orange;
            }
            .pink{
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="box red">A</div>
            <div class="box blue">貳</div>
            <div class="box green">3</div>
            <div class="box yellow">4</div>
            <div class="box orange">5</div>
            <div class="box pink">6</div>
        </div>
    </body>
</html>

示例效果：

四、項目屬性🔥

order
flex-grow
flex-shrink
flex-basis
flex
align-self

4.1 order🚩

order屬性定義項目的排列順序。數值越小，排列越靠前，默認為0

語法：

.item { order: <integer>;
}

完整示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .container{
                border: 1px solid #000000;
                width: 500px;
                height: 600px;
                margin: 0 auto;
                /* 定義flex容器 */
                display: flex;
                /* 設置容器內部元素排列方向 */
                flex-direction: row;
                /* 設置容器內部元素如何換行 */
                flex-wrap: wrap;
            }
            .box{
                width: 120px;
                height: 120px;
            }
            .red{
                background-color: red;
                /* order數值越小項目越靠前 */
                order: 2;
            }
            .blue{
                background-color: blue;
                order: 0;
            }
            .green{
                background-color: green;
                order: 1;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="box red">1</div>
            <div class="box blue">2</div>
            <div class="box green">3</div>
        </div>
    </body>
</html>

示例效果：

4.2 flex-grow🚩

flex-grow屬性定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大

語法：

.item {
  flex-grow: <number>; /* default 0 */
}

完整示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .container{
                border: 1px solid #000000;
                width: 500px;
                height: 600px;
                margin: 0 auto;
                /* 定義flex容器 */
                display: flex;
                /* 設置容器內部元素排列方向 */
                flex-direction: row;
                /* 設置容器內部元素如何換行 */
                flex-wrap: wrap;
            }
            .box{
                width: 120px;
                height: 120px;
                font-size: 50px;
            }
            .red{
                /* flex-grow：定義項目的放大比例，默認為0 */
                background-color: red;
                flex-grow: 1; /* 紅色將剩余空間占據 */
            }
            .blue{
                background-color: blue;
            }
            .green{
                background-color: green;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="box red">1</div>
            <div class="box blue">2</div>
            <div class="box green">3</div>
        </div>
    </body>
</html>

示例效果：

總結：

如果所有項目的flex-grow屬性都為1，則所有項目平等分剩余空間。
如果一個項目的flex-grow屬性為2，其他項目為1，則前者占據的剩余空間將比其他多一倍

4.3 flex-shrink🚩

flex-shrink屬性定義項目的縮小比例，默認值為1，即如果空間不足，則當前項目縮小

語法：

.item {
  flex-shrink: <number>; /* default 1 */
}

完整示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .container{
                border: 1px solid #000000;
                width: 500px;
                height: 600px;
                margin: 0 auto;
                /* 定義flex容器 */
                display: flex;
            }
            .box{
                width: 230px;
                height: 120px;
                font-size: 50px;
            }
            .red{
                background-color: red;
            }
            .blue{
                background-color: blue;
                /* 定義項目的縮小比例，值為0則不縮小 */
                flex-shrink: 0; 
            }
            .green{
                background-color: green;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="box red">1</div>
            <div class="box blue">2</div>
            <div class="box green">3</div>
        </div>
    </body>
</html>

示例效果：

藍色div設置flex-shrink屬性為0，其他div默認為1，空間不足時該藍色div不會被壓縮

總結：

如果所有項目的flex-shrink屬性都為1，當空間不足時都將等比例縮小
如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時前者不會被縮小
負值對該屬性無效

4.4 flex-basis🚩

flex-basis屬性定義了在分配多余空間之前，項目占據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多余空間。它的默認值為auto，即項目的本來大小

設置元素固定或自動空間的占比！

語法：

.item {
  flex-basis: <length> | auto; /* default auto */
}

完整示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .container{
                border: 1px solid #000000;
                width: 500px;
                height: 600px;
                margin: 0 auto;
                /* 定義flex容器 */
                display: flex;
            }
            .box{
                width: 120px;
                height: 120px;
                font-size: 50px;
            }
            .red{
                background-color: red;
                /* 設置元素固定空間占比 */
                flex-basis: 15rem;
            }
            .blue{
                background-color: blue;
            }
            .green{
                background-color: green;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="box red">1</div>
            <div class="box blue">2</div>
            <div class="box green">3</div>
        </div>
    </body>
</html>

示例效果：

設置紅色div剩余空間占比為15rem，也可以設置為px，這樣就可以不用占據所有剩余空間

4.5 flex🚩

flex屬性是 flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為 0 1 auto。后兩個屬性可選

語法：

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

一般放大比例直接設置：

.item {
  flex: 1
}

該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值。

4.6 align-self🚩

align-self屬性允許 單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。

默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。

語法：

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

完整示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .container{
                border: 1px solid #000000;
                width: 500px;
                height: 600px;
                margin: 0 auto;
                /* 定義flex容器 */
                display: flex;
            }
            .box{
                width: 120px;
                height: 120px;
                font-size: 50px;
            }
            .red{
                background-color: red;
                align-self: flex-end;
            }
            .blue{
                background-color: blue;
            }
            .green{
                background-color: green;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="box red">1</div>
            <div class="box blue">2</div>
            <div class="box green">3</div>
        </div>
    </body>
</html>

示例效果：

設置紅色div的align-self屬性為flex-end，則它將在交叉軸的終點對齊

該屬性可能取6個值，除了auto，其他都與align-items屬性完全一致

參考文章：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 詳解flex布局 css flex布局詳解 css 彈性盒子（flex布局）的起邊和終邊詳解詳解flex布局做骰子案例彈性盒布局詳解(display: flex;) 彈性布局（display:flex;）屬性詳解第103天：CSS3中Flex布局（伸縮布局）詳解 Flex布局 flex布局 flex布局