flex 布局詳解

關于flex具體是什么在此不贅述，官方文檔在此：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

我自己通過實例總結如下：

flex 布局主要有兩大塊：1. 父元素；2. 子元素

把這兩大塊搞明白就算吃透flex布局了（接下來的實例中，我會將完整代碼貼出來，大家可復制代碼在瀏覽器運行感受一下）。

父元素

1. justify-content

元素水平方向上的布局常用的也就5個屬性而已，代碼：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>justify-content</title>
  <style>
      .boxp{
          background: lightgreen;
          height: 100px;

          display: flex;
          margin-bottom: 50px;
      }
      .boxp div{
          width: 100px;
          height: 100px;
          background: purple;
      }
      .center{
          justify-content: center;
      }
      .space-between{
          justify-content: space-between;
      }
      .space-around{
          justify-content: space-around;
      }
      .flex-start{
          justify-content: flex-start;
      }
      .flex-end{
          justify-content: flex-end;
      }
  </style>
</head>
<body>
  <!-- justify-content: center -->
  <div class="boxp center">
      <div></div><div></div><div></div><div></div>
  </div>

  <!-- justify-content: space-between -->
  <div class="boxp space-between">
      <div></div><div></div><div></div><div></div>
  </div>

  <!-- justify-content: space-around -->
  <div class="boxp space-around">
      <div></div><div></div><div></div><div></div>
  </div>

  <!-- justify-content: flex-start -->
  <div class="boxp flex-start">
      <div></div><div></div><div></div><div></div>
  </div>

  <!-- justify-content: flex-end -->
  <div class="boxp flex-end">
      <div></div><div></div><div></div><div></div>
  </div>
</body>
</html>

效果如下：

justify-content

注意

space-between: 先是兩端對齊，剩余的子元素之間間隔相同

space-around: 每個元素左右距離相同（為了方便理解，可想象成每個元素都是margin: 0 20px; 這種效果，所以兩側的剩余寬度是項目間隔寬度的二分之一）。

2. align-items

元素垂直方向上的布局，常用的就5個屬性，代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>align-items</title>
    <style>
        .boxp{
            height: 120px;
            background: lightgreen;
            display: flex;
            margin-bottom: 30px;
        }
        .boxp div{
            width: 80px;
            background: yellow;
            margin: 0 10px;
        }
        .one{
            height: 50px;
            font-size: 12px;
        }
        .two{
            height: 80px;
            font-size: 25px;
        }
        .three{
            height: 60px;
            font-size: 45px;
        }
        .noheight{
            height: auto;
        }
        .center{
            align-items: center;
        }
        .flex-start{
            align-items: flex-start;
        }
        .flex-end{
            align-items: flex-end;
        }
        .baseline{
            align-items: baseline;
        }
        .stretch{
            align-items: stretch;
        }
    </style>
</head>
<body>
    <!-- align-items: center; -->
    <div class="boxp center">
        <div class="one">1</div><div class="two">2</div><div class="three">3</div>
    </div>

    <!-- align-items: flex-start; -->
    <div class="boxp flex-start">
        <div class="one">1</div><div class="two">2</div><div class="three">3</div>
    </div>

    <!-- align-items: flex-end; -->
    <div class="boxp flex-end">
        <div class="one">1</div><div class="two">2</div><div class="three">3</div>
    </div>

    <!-- align-items: baseline; -->
    <div class="boxp baseline">
        <div class="one">1</div><div class="two">2</div><div class="three">3</div>
    </div>

    <!-- align-items: stretch; -->
    <div class="boxp stretch">
        <div class="noheight">1</div><div class="noheight">2</div>
    </div>
</body>
</html>

效果：

align-items

注意

baseline: 使整行文字的基準線平齊，在此基礎上布局子元素

stretch: 元素沒有設置具體高度值，或者高度屬性值為auto時，才會生效

3. align-content

要解釋這個屬性，先帶大家理解一下flex布局容器中“軸”的概念：

flex布局的容器中默認有兩根軸：1. 水平方向的主軸；2：垂直方向的軸。
容器內的元素默認按照主軸的方向進行布局，當元素不止一行的時候，水平方向就會存在多根軸；
或者當元素按照垂直方向布局，當元素不止一列時，垂直方向就會存在多根軸。

align-content就是對這多根軸進行布局。具體看代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>align-content</title>
    <style>
        .boxp{
            background: lightgreen;
            display: flex;
            margin-bottom: 20px;
            height: 500px;
            flex-wrap: wrap;
        }
        .boxp div{
            width: 300px;
            height: 50px;
            background: yellow;
            margin: 10px;
        }
        .center{
            align-content: center;
        }
        .space-between{
            align-content: space-between;
        }
        .space-around{
            align-content: space-around;
        }
        .flex-start{
            align-content: flex-start;
        }
        .flex-end{
            align-content: flex-end;
        }
    </style>
</head>
<body>
    <!-- align-content: center -->
    <div class="boxp center">
        <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>

    <!-- align-content: space-between -->
    <div class="boxp space-between">
        <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>

    <!-- align-content: space-between -->
    <div class="boxp space-around">
        <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>

    <!-- align-content: flex-start -->
    <div class="boxp flex-start">
        <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>

    <!-- align-content: flex-end -->
    <div class="boxp flex-end">
        <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>
</body>
</html>

效果：

align-content

4. flex-wrap

子元素是否可以換行展示，常用的只有三個屬性，代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex-wrap</title>
    <style>
        .boxp{
            background: lightgreen;
            height: 200px;
            display: flex;
            margin-bottom: 30px;
        }
        .boxp div{
            width: 100px;
            height: 50px;
            margin: 10px;
            background: yellow;
        }
        .wrap{
            flex-wrap: wrap;
        }
        .nowrap{
            flex-wrap: nowrap;
        }
        .wrap-reverse{
            flex-wrap: wrap-reverse;
        }
    </style>
</head>
<body>
    <!-- flex-wrap: wrap; -->
    <div class="boxp wrap">
        <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>

    <!-- flex-wrap: nowrap; -->
    <div class="boxp nowrap">
        <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>

    <!-- flex-wrap: wrap-reverse; -->
    <div class="boxp wrap-reverse">
        <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>
</body>
</html>

效果：

flex-wrap

注意
當沒有設置flex-wrap屬性時，默認是不換行的，所有子元素會擠在一排。
屬性值為wrap-reverse時，是把行倒序排列，但每一行里面的元素還是原來的順序，這樣想就容易理解了。

5. flex-direction

元素排列方向，常用的四個屬性，代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex-direction</title>
    <style>
        .boxp{
            background: lightgreen;
            display: flex;
            margin-bottom: 20px;
        }
        .boxp div{
            width: 50px;
            height: 50px;
            background: yellow;
            margin: 10px;
        }
        .row{
            height: 80px;
            flex-direction: row;
        }
        .row-reverse{
            height: 80px;
            flex-direction: row-reverse;
        }
        .column{
            height: 350px;
            flex-direction: column;
        }
        .column-reverse{
            height: 350px;
            flex-direction: column-reverse;
        }
    </style>
</head>
<body>
    <!-- flex-direction: row; -->
    <div class="boxp row">
        <div>1</div><div>2</div><div>3</div><div>4</div>
    </div>

    <!-- flex-direction: row-reverse; -->
    <div class="boxp row-reverse">
        <div>1</div><div>2</div><div>3</div><div>4</div>
    </div>

    <!-- flex-direction: column; -->
    <div class="boxp column">
        <div>1</div><div>2</div><div>3</div><div>4</div>
    </div>

    <!-- flex-direction: column-reverse; -->
    <div class="boxp column-reverse">
        <div>1</div><div>2</div><div>3</div><div>4</div>
    </div>
</body>
</html>

效果：

flex-direction

注意
不僅要注意元素排列順序，還要注意相對父元素的排列方向！！！

6. flex-flow

flex-direction 和 flex-wrap 的簡寫，應該很好理解吧，在此不贅述，請查看官網文檔。

子元素

1. order

設置當前子元素的排序位置，數字越小越往前，默認為0，可以是負數。
代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex-wrap</title>
    <style>
        .boxp{
            background: lightgreen;
            height: 100px;
            display: flex;
            margin-bottom: 30px;
        }
        .boxp div{
            width: 100px;
            height: 50px;
            margin: 10px;
            background: yellow;
        }
        .NO1{
            -webkit-order: 5;
            -moz-order: 5;
            -ms-order: 5;
            -o-order: 5;
            order: 5;
        }
        .NO-3{
            -webkit-order: -3;
            -moz-order: -3;
            -ms-order: -3;
            -o-order: -3;
            order: -3;
        }
        .NO-2{
            -webkit-order: -2;
            -moz-order: -2;
            -ms-order: -2;
            -o-order: -2;
            order: -2;
        }
    </style>
</head>
<body>
    <!-- 無order -->
    <div class="boxp">
        <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
    </div>

    <!-- 有order -->
    <div class="boxp">
        <div class="NO1">1</div>
        <div>2</div>
        <div>3</div>
        <div class="NO-2">4</div>
        <div class="NO-3">5</div>
    </div>
</body>
</html>

效果：

order

2. flex-grow

設置項目占剩余空間的份額(如果有剩余空間的話)，如果為0，則不拉伸，負數無效。
代碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex-grow</title>
    <style>
        .boxp{
            background: lightgreen;
            height: 100px;
            display: flex;
            margin-bottom: 30px;
        }
        .boxp div{
            width: 100px;
            height: 50px;
            margin: 10px;
            background: yellow;
        }
        .grow0{
            flex-grow: 0;
        }
        .grow-1{
            flex-grow: -1;
        }
        .grow2{
            flex-grow: 2;
        }
        .grow3{
            flex-grow: 3;
        }
    </style>
</head>
<body>
    <!-- 無flex-grow -->
    <div class="boxp">
        <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
    </div>

    <!-- 有flex-grow -->
    <div class="boxp">
        <div class="grow0">flex-grow: 0</div>
        <div class="grow-1">flex-grow: -1</div>
        <div>3</div>
        <div class="grow2">flex-grow: 2</div>
        <div class="grow3">flex-grow: 3</div>
    </div>
</body>
</html>

效果：

flex-grow

3. flex-shrink

當空間不夠時，設置子元素的縮小比例。若屬性值為0，則不縮小。
代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex-shrink</title>
    <style>
        .boxp{
            background: lightgreen;
            height: 100px;
            display: flex;
            margin-bottom: 30px;
        }
        .boxp div{
            width: 500px;
            height: 50px;
            outline: 1px solid green;
            background: yellow;
        }
        .shrink0{
            flex-shrink: 0;
        }
        .shrink1{
            flex-shrink: 1;
        }
        .shrink2{
            flex-shrink: 2;
        }
        .shrink3{
            flex-shrink: 3;
        }
        .shrink4{
            flex-shrink: 4;
        }
    </style>
</head>
<body>
    <!-- 無flex-shrink -->
    <div class="boxp">
        <div>未設置flex-shrink</div><div>未設置flex-shrink</div><div>未設置flex-shrink</div><div>未設置flex-shrink</div><div>未設置flex-shrink</div>
    </div>

    <!-- 有flex-shrink -->
    <div class="boxp">
        <div class="shrink0">flex-shrink: 0</div>
        <div class="shrink1">flex-shrink: 1</div>
        <div class="shrink2">flex-shrink: 2</div>
        <div class="shrink3">flex-shrink: 3</div>
        <div class="shrink4">flex-shrink: 4</div>
    </div>
</body>
</html>

效果：

flex-shrink

關于flex-shrink計算規則：

在上例中，五個子元素，每個寬度是500px，所以總寬度是500*5=2500px

父元素寬度1660px，所以需要子元素們縮小2500-1660=840px

五個子元素flex-shrink屬性值分別為0、1、2、3、4，所以總共縮小的份數是0+1+2+3+4=10，每一份的寬度是 840 ÷ 10 = 84px;

第一個子元素flex-shrink: 0，所占份額是0，所以不進行縮小，最終寬度是500px

第二個子元素flex-shrink: 1，所占份額是1，所以縮小1份，最終寬度是500-84*1=416px

第三個子元素flex-shrink: 2，所占份額是2，所以縮小2份，最終寬度是500-84*2=332px

第四個子元素flex-shrink: 3，所占份額是3，所以縮小3份，最終寬度是500-84*3=248px

第五個子元素flex-shrink: 4，所占份額是4，所以縮小4份，最終寬度是500-84*4=164px

注意：如果元素設置margin、padding、border，需要把這些也算進寬度里

4. flex-basis

定義子元素在主軸方向上的初始大小。

當一個元素同時被設置了 flex-basis (除值為 auto 外) 和 width (或者在 flex-direction: column 情況下設置了height) , flex-basis 具有更高的優先級.

翻譯成人話就是說：flex-basis 比 width或height 優先級高！
代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex-basis</title>
    <style>
        .boxp{
            background: lightgreen;
            height: 100px;
            display: flex;
            margin-bottom: 30px;
        }
        .boxp div{
            width: 500px;
            height: 50px;
            margin: 10px;
            background: yellow;
        }
        .basis{
            flex-basis: 300px;
        }
    </style>
</head>
<body>
    <div class="boxp">
        <div>width:500px;</div>
        <div class="basis">width:500px; flex-basis: 300px;</div>
    </div>
</body>
</html>

效果：

flex-basis

5. flex

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

6. align-self

設置當前子元素相對父元素的對齊方式，可覆蓋父元素的align-items屬性。屬性值和align-items的屬性值一樣。
代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex-basis</title>
    <style>
        .boxp{
            background: lightgreen;
            height: 200px;
            display: flex;
            margin-bottom: 30px;
            align-items: center;
        }
        .boxp div{
            width: 170px;
            height: 50px;
            margin: 10px;
            background: yellow;
        }
        .align-self{
            align-self: flex-end;
        }
    </style>
</head>
<body>
    <div class="boxp">
        <div></div>
        <div></div>
        <div></div>
        <div class="align-self">align-self: flex-end;</div>
        <div></div>
    </div>
</body>
</html>

效果：

align-self

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
沈念sama閱讀 229,836評論 6贊 540
死咒
序言：濱河連續發生了三起死亡事件，死亡現場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發現死者居然都...
沈念sama閱讀 99,275評論 3贊 428
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
開封第一講書人閱讀 177,904評論 0贊 383
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長。經常有香客問我，道長，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 63,633評論 1贊 317
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
茶點故事閱讀 72,368評論 6贊 410
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著，像睡著了一般。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發上，一...
開封第一講書人閱讀 55,736評論 1贊 328
城市分裂傳說
那天，我揣著相機與錄音，去河邊找鬼。笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。我是一名探鬼主播，決...
沈念sama閱讀 43,740評論 3贊 446
雙鴛鴦連環套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
開封第一講書人閱讀 42,919評論 0贊 289
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當地人在樹林里發現了一具尸體，經...
沈念sama閱讀 49,481評論 1贊 335
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內容為張勛視角年9月15日...
茶點故事閱讀 41,235評論 3贊 358
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發現自己被綠了。大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 43,427評論 1贊 374
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
沈念sama閱讀 38,968評論 5贊 363
?日本核電站爆炸內幕
正文年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發生泄漏。R本人自食惡果不足惜，卻給世界環境...
茶點故事閱讀 44,656評論 3贊 348
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 35,055評論 0贊 28
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監牢的瞬間，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 36,348評論 1贊 294
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。一個月前我還...
沈念sama閱讀 52,160評論 3贊 398
代替公主和親
正文我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 48,380評論 2贊 379

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

flex 布局詳解

flex 布局詳解

父元素

1. justify-content

2. align-items

3. align-content

4. flex-wrap

5. flex-direction

6. flex-flow

子元素

1. order

2. flex-grow

3. flex-shrink

4. flex-basis

5. flex

6. align-self

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

flex 布局詳解

父元素

1. justify-content

2. align-items

3. align-content

4. flex-wrap

5. flex-direction

6. flex-flow

子元素

1. order

2. flex-grow

3. flex-shrink

4. flex-basis

5. flex

6. align-self

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频