CSS魔法堂：Flex佈局

時間 2019-11-06

標籤 css flex 佈局欄目 CSS 简体版

原文原文鏈接

前言

Flex是Flexible Box的縮寫，就是「彈性佈局」。從2012年已經面世，但因爲工做環境的緣由一直沒有詳細瞭解。最近工做忙到頭暈腦脹，是要學點新東西刺激一下大腦，打打雞血。css

Flex就這麼簡單

瀏覽器兼容性

一說到兼容性就是永遠的痛，不過幸運的是隻要在IE10加-ms-前綴就能夠用啦^_^html

涉及的對象

Flex佈局主要是操做Flex Container 和 Flex Item兩類對象。

Flex Container爲做爲佈局容器擁有main axis，main start，main end，cross axis，cross start 和 cross end屬性。
瀏覽器

main axis爲主軸，默認是水平方向；
main start爲主軸起始位置，默認是主軸和左側邊框的交叉點(Flex Item會從main start和cross start開始排列)；
main end爲主軸結束位置，默認是主軸和右側邊框的交叉點；
cross axis爲交叉軸，默認是垂直方向；
cross start爲交叉軸起始位置，默認是交叉軸和上邊框的交叉點；
cross end爲交叉軸結束位置，默認是交叉軸和下邊框的交叉點。

Flex Item則爲容器內的孩子元素，擁有main size和cross size屬性。
ide

main size爲Flex Item的主軸方向寬度；
cross size爲Flex Item的交叉軸方向寬度。

玩轉Flex Container

/* 設置Flex Container，爲其直接孩子節點建立Flex Context */
display: flex;        /* 定義塊級Flex Contianer */
display: inline-flex; /* 定義行級Flex Contianer */

/* 設置main/cross axis方向和main/cross start, main/cross end的位置
 * row - 默認值，main axis爲水平，main start爲主軸和左側邊框的交叉點，main end爲主軸和右側邊框的交叉點
 *               cross axis爲垂直，cross start爲交叉軸和上邊框的交叉點，cross end爲交叉軸和下邊框的交叉點
 * row-reverse - main axis爲水平，main start爲主軸和右側邊框的交叉點，main end爲主軸和左側邊框的交叉點
 *               cross axis爲垂直，cross start爲交叉軸和上邊框的交叉點，cross end爲交叉軸和下邊框的交叉點
 * column - main axis爲垂直，main start爲主軸和上邊框的交叉點，main end爲主軸和下邊框的交叉點
 *          cross axis爲水平，cross start爲交叉軸和左側邊框的交叉點，cross end爲交叉軸和右側邊框的交叉點
 * column-reverse - main axis爲垂直，main start爲主軸和下邊框的交叉點，main end爲主軸和上邊框的交叉點
 *                  cross axis爲水平，cross start爲交叉軸和左側邊框的交叉點，cross end爲交叉軸和右側邊框的交叉點
 */
flex-direction: row | row-reverse | column | column-reverse

/* 是否換行
 * nowrap - 默認值，打死都不換行
 * wrap - 乖乖換行，第一行到最後一行的方向爲從 cross start 到 cross end
 * wrap-reverse - 乖乖換行，但第一行到最後一行的方向爲從 cross end 到 cross start
 */
flex-wrap: nowrap | wrap | wrap-reverse

/* 一次搞定flex-direction 和 flex-wrap設置
 */
flex-flow: <flex-direction> || <flex-wrap>

/* 設置main axis方向的對齊方式
 * flex-start - 默認值，向main start對齊
 * flex-end - 向main end對齊
 * center - 居中
 * space-between - 如有多餘空間，則平均分配到各Flex Item之間
 * space-around - 如有多餘空間，則平均分配到各Flex Item兩邊
 * space-evenly - 如有多餘空間，按"多餘空間/(FlexItem數+1)"計算獲得空間寬度，而後分配到各Flex Item兩邊
 */
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly

/* 設置cross axis方向的對齊方式
 * stretch - 默認值，當height爲auto時，Flex Item被拉伸沾滿cross axis的空間；不然無效果。
 * flex-start - 向cross start對齊
 * flex-end - 向cross end對齊
 * center - 居中
 * baseline - 對齊Flex Container的baseline
 */
align-items: flex-start | flex-end | center | stretch | baseline

/* 設置cross axis出現多行時，cross axis方向的對齊方式。當僅有一行時，無效果。
 * stretch - 默認值，當height爲auto時，Flex Item被拉伸沾滿cross axis的空間；不然無效果。
 * flex-start - 向cross start對齊
 * flex-end - 向cross end對齊
 * center - 居中
 * space-between - 如有多餘空間，則平均分配到各Flex Item之間
 * space-round - 如有多餘空間，則平均分配到各Flex Item兩邊 
 */
align-content: flex-start | flex-end | center | stretch | space-between | space-around

玩轉Flex Item

注意：Flex Item的float,clear和vertical-align均無效。佈局

/* 設置顯示順序
 * 默認值爲0，根據元素在DOM樹的位置決定顯示的順序
 */
order: <integer>

/* 設置當main axis方向存在多餘空間時，元素拉伸所佔的比例。
 * 例如#div1[style="flex-grow:1"]和#div2[style="flex-grow:3"]，如今多餘空間爲400px，那麼div1佔400*1/(1+3)，而div2佔400*3/(1+3)。
 * 默認值爲0，即元素不拉伸
 */
flex-grow: <number>

/* 設置當main axis方向存在空間不足且flex-wrap:nowrap時，元素的縮放比例。
 * 默認值爲1
 */
flex-shrink: <number>

/* 設置元素的默認寬度，當設置爲0時flex-grow無效
 * 默認值爲auto
 */
flex-basis: auto | <length>

/* 一次搞定flex-grow、 flex-shrink和flex-basis
 * 默認值0 1 auto，關鍵值none 爲 0 0 auto，關鍵值auto爲 1 1 auto。
 */
flex: none | [<flex-grow> <flex-shrink>? || <flex-basis>]

/* 設置cross axis方向的對齊方式
 * stretch - 默認值，當height爲auto時，Flex Item被拉伸沾滿cross axis的空間；不然無效果。
 * flex-start - 向cross start對齊
 * flex-end - 向cross end對齊
 * center - 居中
 * baseline - 對齊Flex Container的baseline
 */
align-self: auto | flex-start | flex-end | center | baseline | stretch

應用

經過Flex Layout咱們能夠輕鬆實現過去很差實現的效果flex

色子

<div class="box box1">
  <span class="dot"></span>
</div>
<div class="box box2">
  <span class="dot"></span>
  <span class="dot"></span>
</div>
<div class="box box3">
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</div>
<div class="box box4">
  <div class="column">
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
  <div class="column">
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
</div>
<div class="box box5">
  <div class="column">
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
  <span class="dot"></span>
  <div class="column">
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
</div>
<div class="box box6">
  <div class="column">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
  <div class="column">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
</div>

.box{
    vertical-align: top;
    margin: 10px;
    padding: 10px;
    width: 100px;
    height: 100px;
    background: #ccc;
    border-radius: 10%;
    box-shadow: 0 5px 1px #fff inset
        , 0 -5px 1px #888 inset
        , 5px 0 1px #aaa inset
        , -5px 0 1px #aaa inset;
    display: inline-flex;
    flex-flow: row wrap;
}
.dot{
    width:30px;
  height:30px;
    background: #222;
    border-radius:50%;
    box-shadow: 1px 4px 1px #000 inset
        , -1px -3px 3px #444 inset;
}

.box1{
    justify-content: center;
    align-items: center;
}
.box2{
    justify-content: space-between;
}
.box2 > .dot:last-child{
    align-self: flex-end;
}
.box3{
    justify-content: space-between;
}
.box3 > .dot:nth-of-type(2){
    align-self: center;
}
.box3 > .dot:last-child{
    align-self: flex-end;
}

.box4{
      flex-flow: column;
        justify-content: space-between;
}
.column{
    display: flex;
    justify-content: space-between;
}

.box5{
      flex-flow: column;
        justify-content: space-between;
}
.box5 > .dot{
    align-self: center;
}

.box6{
      flex-flow: row;
        justify-content: space-between;
}
.box6 > .column{
  flex-flow: column;
}

聖盃佈局

<body class="container">
  <header>#header</header>
  <main>#main</main>
  <aside class="left-aside">#aside1</aside>
  <aside class="right-aside">#aside2</aside>
  <footer>#footer</footer>
</body>

body{
    margin:0;
    font-style: italic;
    font-family: sans;
}

/* Holy Grail Layout */
.container{
    display: flex;
    flex-direction: column;
}

@media all and (min-width: 600px){
    .container{
        flex-flow: row wrap;
    }
    header,footer{
        flex: 0 0 100%;
    }
    header{
        order: 0;
    }
    footer{
        order: 4;
    }
    .left-aside{
        order: 1;
    }
    .right-aside{
        order: 3;
    }
    .left-aside,.right-aside{
        flex: 0 0 10em;
    }
    main{
        order: 2;
        flex: 1;
    }
}

/* User Defined Style*/
.container > *{
    text-align: center;
}
main{
    background: #ccc;
    line-height: 6;
}
.left-aside{
    background: skyblue;
    line-height: 4;
}
.right-aside{
    background: tomato;
    line-height: 4;
}
header,footer{
    background: #666;
    line-height: 3;
}

柵格系統

<div class="grid">
  <div class="row">
    <div class="col col-5">
      <div>5/10</div>
    </div>
    <div class="col col-4">
      <div>4/10</div>
    </div>
    <div class="col col-1">
      <div>1/10</div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col">
    <div>
      auto
    </div>
  </div>
  <div class="col col-3">
    <div>
      3/10
    </div>
  </div>
</div>

/* Mobile First Grid System */
.grid{
    display: flex;
    flex-flow: row wrap;
}
.row{
    flex:0 0 100%;
    display:flex;
    flex-flow: row wrap;
}
.col{
    box-sizing: border-box;
    padding: 5px;
    flex: 0 0 100%;
}
@media all and (min-width:600px){
.col{
    flex: 1;
}
.col-10{flex:0 0 100%;}
.col-9{flex:0 0 90%;}
.col-8{flex:0 0 80%;}
.col-7{flex:0 0 70%;}
.col-6{flex:0 0 60%;}
.col-5{flex:0 0 50%;}
.col-4{flex:0 0 40%;}
.col-3{flex:0 0 30%;}
.col-2{flex:0 0 20%;}
.col-1{flex:0 0 10%;}
}

/* User Defined Style*/
.col>div{
    text-align: center;
    background: #bbb;
    line-height: 2.5;
    height: 100%;
    font-family: sans;
}

帶附加項的表單控件

<div class="form-input">
  <i class="form-addon">Amount</i>
  <input class="form-control">
  <i class="form-addon form-addon-after">Encrypt</i>
</div>

.form-input{
    display: inline-flex;
    line-height: 2;
    border: solid 1px rgba(0,0,0,0.3);
}
.form-input:hover{
        border: solid 1px rgba(0,0,0,0.4);
}
.form-addon{
    font-style: normal;
    color: #666;
    background: #ddd;
    padding-left: 10px;
    padding-right: 10px;
    border-right: solid 1px rgba(0,0,0,0.3);
}
.form-addon-after{
    border-left: solid 1px rgba(0,0,0,0.3);
    border-right: none 0;
}
.form-control{
    border:none 0;
    outline-color: transparent;
    padding: 5px;
    caret-color: #888;
    font-size: 16px;
}