【前端】03 - 移動web開發(fā) - flex布局（彈性布局）

1.傳統(tǒng)布局和flex布局對比

1.1 傳統(tǒng)布局

  1. 兼容性好。

  2. 布局繁瑣。

  3. 局限性，不能再移動端很好的布局。

1.2 flex 布局

  1. 操作方便，布局極其簡單，移動端使用比較廣泛。

  2. pc端瀏覽器支持情況比較差。

  3. IE11或更低版本不支持flex或僅支持部分。

1.3 建議

  1. 如果是pc端頁面布局，還是采用傳統(tǒng)方式。

  2. 如果是移動端或者是不考慮兼容的pc則采用flex。

2. flex布局原理

  1. flex 是 flexible Box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性，任何一個容器都可以指定為 flex 布局。

  2. 當我們?yōu)楦负凶釉O(shè)為 flex 布局以后，子元素的 float、clear 和vertical-align 屬性將失效。

  3. flex 布局又叫伸縮布局 、彈性布局 、伸縮盒布局 、彈性盒布局 。

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

  5. 總結(jié)：就是通過給父盒子添加flex屬性，來控制子盒子的位置和排列方式。

3. 父項常見屬性

這些屬性是和 display:flex;寫在一起的都是寫在父盒子中。

  1. flex-direction：設(shè)置主軸的方向。

  2. justify-content：設(shè)置主軸上的子元素排列方式。

  3. flex-wrap：設(shè)置子元素是否換行 。

  4. align-content：設(shè)置側(cè)軸上的子元素的排列方式（多行）。

  5. align-items：設(shè)置側(cè)軸上的子元素排列方式（單行）。

  6. flex-flow：復合屬性，相當于同時設(shè)置了flex-direction 和 flex-wrap。

3.1 flex-direction設(shè)置主軸的方向

  1. 在 flex 布局中，是分為主軸和側(cè)軸兩個方向，同樣的叫法有 ： 行和列、x 軸和y 軸。

  2. 默認主軸方向就是x 軸方向，水平向右。

  3. 默認側(cè)軸方向就是 y 軸方向，水平向下。

flex-direction`設(shè)置主軸的方向
  1. 注意： 主軸和側(cè)軸是會變化的，就看 flex-direction 設(shè)置誰為主軸，剩下的就是側(cè)軸。而我們的子元素是跟著主軸來排列的。
flex-direction設(shè)置誰為主軸

3.2 justify-content設(shè)置主軸上的子元素排列方式

justify-content 設(shè)置主軸上的子元素排列方式

3.3 flex-wrap設(shè)置是否換行

  1. 默認情況下，項目都排在一條線（又稱”軸線”）上。flex-wrap 屬性定義，flex布局中默認是不換行的。

  2. nowrap 不換行。

  3. wrap換行。

3.4 align-items 設(shè)置側(cè)軸上的子元素排列方式（單行 ）

  1. 該屬性是控制子項在側(cè)軸（默認是y軸）上的排列方式 在子項為單項（單行）的時候使用。

  2. flex-start從頭部開始。

  3. flex-end 從尾部開始。

  4. center居中顯示。

  5. stretch 拉伸。

3.5 align-content 設(shè)置側(cè)軸上的子元素的排列方式（多行）

  1. 設(shè)置子項在側(cè)軸上的排列方式 并且只能用于子項出現(xiàn) 換行 的情況（多行），在單行下是沒有效果的。
align-content 設(shè)置側(cè)軸上的子元素的排列方式（多行）

3.6 align-content 和 align-items 區(qū)別

  1. align-items 適用于單行情況下， 只有上對齊、下對齊、居中和 拉伸。

  2. align-content 適應于換行（多行）的情況下（單行情況下無效）， 可以設(shè)置 上對齊、下對齊、居中、拉伸以及平均分配剩余空間等屬性值。

  3. 總結(jié)就是單行找 align-items 多行找 align-content 。

3.7 flex-flow 屬性是 flex-direction 和 flex-wrap 屬性的復合屬性

  flex-flow:row wrap;

4. flex 布局子項常見屬性

  1. flex 子項目占的份數(shù)。

  2. align-self 控制子項自己在側(cè)軸的排列方式。

  3. order 屬性定義子項的排列順序（前后順序）。

4.1 flex 屬性（重要）

  1. flex 屬性定義子項目分配剩余空間，用flex來表示占多少份數(shù)。

  2. 案例演示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"
          ,maximum-scale=1.0,minimum-scale=1.0>
    <title>flex子項常見的屬性</title>

    <style>

        em,
        i {
            /* 去除斜體 */
            font-style: normal;
        }

        /* 首尾固定寬度 中間為剩余的所有空間 */
        div {
            display: flex;
            width: 60%;
            height: 150px;
            margin: 100px auto;
            background-color: pink;
        }

        div span:first-child,
        div span:last-child {
            width: 99px;
            background-color: skyblue;
        }

        div span:nth-child(2) {
            flex: 1;
        }

        /* 三等分 */
        p {
            display: flex;
            width: 60%;
            height: 150px;
            margin: 100px auto;
            background-color: aqua;
        }

        p span {
            flex: 1;
        }

        p span:nth-child(1) {
            background-color: #FF8329;
        }

        p span:nth-child(2) {
            background-color: #FF930A;
        }

        p span:nth-child(3) {
            background-color: #c6ff1d;
        }

        div em:nth-child(1) {
            flex: 1;
            background-color: #FF8329;
        }

        div em:nth-child(2) {
            flex: 2;
            background-color: #ff7815;
        }

        div em:nth-child(3) {
            flex: 3;
            background-color: #ff6507;
        }

        .block_div {
            width: 900px;
            background-color: pink;
        }

        div i {
            display: block;
        }

        div i:nth-child(1) {
            width: 100px;
            background-color: #ff974c;
        }

        div i:nth-child(2) {
            width: 300px;
            background-color: #ff8031;
        }

        div i:nth-child(3) {
            width: 500px;
            background-color: #ff4c00;
        }
    </style>

</head>
<body>

<!-- 兩端寬度固定 剩余的中間平分 -->
<div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>

<!-- 進行三等分 -->
<p>
    <span>1</span>
    <span>2</span>
    <span>3</span>
</p>

<div>
    <em>1</em>
    <em>2</em>
    <em>3</em>
</div>

<!-- 不使用flex -->
<div class="block_div">
    <i>1</i>
    <i>2</i>
    <i>3</i>
</div>

</body>
</html>
案例結(jié)果

4.2 align-self控制子項自己在側(cè)軸上的排列方式

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

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

  3. 案例演示 :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"
          ,maximum-scale=1.0,minimum-scale=1.0>
    <title>align-self和order</title>

    <style>

        div {
            display: flex;
            width: 80%;
            height: 500px;
            background-color: pink;
            /* 這會將三個盒子一起下移 */
            /*align-items: flex-end;*/
        }

        div span {
            width: 100px;
            height: 100px;
            background-color: aqua;
            margin: 10px;
        }

        div span:nth-child(1) {
            align-self: flex-end;
        }

        div span:nth-child(3) {
            align-self: flex-end;
        }

        /* 可以使用order 交換盒子之間的順序 */
        div span:nth-child(2) {
            order: 3;
        }

    </style>
</head>
<body>

<div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>

</body>
</html>

4.3 order 屬性定義項目的排列順序

  1. 數(shù)值越小，排列越靠前，默認為0。

  2. 注意：和 z-index 不一樣。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

友情鏈接更多精彩內(nèi)容