flex給我實(shí)現(xiàn)一個(gè)對(duì)角線布局

flex在css布局中的是一個(gè)經(jīng)?？疾斓闹R(shí)點(diǎn)，雖然垂直居中問題已經(jīng)問得快爛大街了，flex你雖然總是在用，但是總會(huì)有你不知道的盲點(diǎn)

本文是一篇關(guān)于flex布局相關(guān)的總結(jié)筆記，遇到比較刁鉆的問題，就當(dāng)個(gè)知識(shí)拓展吧

在閱讀本文之前，主要從以下幾個(gè)方向去探討flex

flex布局又稱為彈性布局，有何特征

關(guān)于flex的一些屬性值

flex如何實(shí)現(xiàn)垂直居中，如何實(shí)現(xiàn)一個(gè)對(duì)角排列布局

flex特征
當(dāng)我們對(duì)一個(gè)元素設(shè)置flex后，其子元素所有的float，clean、vertical-align屬性都會(huì)失效，并且默認(rèn)水平排列，并且寬度由自身元素內(nèi)容決定。

影響主軸與交叉軸的屬性
flex-direction

主要影響水平軸排列還是交叉軸排列

.wrap-box {
  display: flex;
  // flex-direction: row; 默認(rèn)從左往右
  flex-direction: row-revers; 順序從右往左
  flex-direction: column; 從上往下
  flex-direction: column-reverse; 從下往上
}



flex-wrap 主要影響水平軸元素是否換行，默認(rèn)不換行flex-wrap:nowrap

.wrap-box {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap // 不換行
  // flex-wrap: wrap // 換行
  // flex-wrap: wrap-reverse 換行從下往上依次排列
}
flex-flow

這個(gè)屬性主要是flex-direction與flex-wrap的結(jié)合體

.wrap-box {
  display: flex;
  flex-flow: row nowrap // 默認(rèn)
}
justify-content

主要影響水平主軸的排列順序

.wrap-box {
  display: flex;
  justify-content: flex-start // 左對(duì)齊排列
  // justify-content: center // 居中排列
  // justify-content: space-between // 兩端對(duì)齊排列
  // justify-content: space-around // 間隔相等排列
  // justify-content: flex-end // 居右排列
}
align-items

主要影響交叉軸垂直方向的排列

.wrap-box {
  display: flex;
  align-items: flex-start; // 垂直方向從上往下排列
  // align-items: center 垂直方向居中排列
  // align-items: flex-end 垂直方向從下往上排列
  // align-items: stretch 會(huì)將子元素高度拉伸父元素一致(子元素未設(shè)置高度)
}



關(guān)于item項(xiàng)目設(shè)置的屬性
order

決定子項(xiàng)目的順序，order越小，越是排列在最前面

假設(shè)現(xiàn)在有個(gè)需求，css實(shí)現(xiàn)簡(jiǎn)單的跑馬燈

 <div class="wrap-box">
    <div class="item-1">1</div>
    <div class="item-2">2</div>
    <div class="item-3">3</div>
 </div>
對(duì)應(yīng)的css

    @keyframes ani-1 {
        0% {
          order: 0;
        }
        50% {
          order: 1;
        }
        100% {
          order: 2;
        }
      }
      @keyframes ani-2 {
        0% {
          order: 1;
        }
        50% {
          order: 0;
        }
        100% {
          order: 1;
        }
      }
      @keyframes ani-3 {
        0% {
          order: 2;
        }
        50% {
          order: 2;
        }
        100% {
          order: 0;
        }
      }
  .wrap-box {
        width: 500px;
        height: 500px;
        overflow: hidden;
        display: flex;
        background-color: green;
        align-items: stretch;
      }
      .wrap-box .item-1,
      .wrap-box .item-2,
      .wrap-box .item-3 {
        width: 100px;
        height: 100px;
        background-color: red;
      }
      .wrap-box .item-1 {
        animation: ani-1 5s infinite;
        transition: order 1s ease;
      }
      .wrap-box .item-2 {
        animation: ani-2 5s infinite;
        transition: order 1s ease;
      }
      .wrap-box .item-3 {
        animation: ani-3 5s infinite;
        transition: order 1s ease;
      }
我們利用css3的動(dòng)畫幀，改變order的順序，因此一個(gè)簡(jiǎn)易的css跑馬燈就實(shí)現(xiàn)了，而且并沒有改變dom的結(jié)構(gòu)和順序



flex-basis

設(shè)置當(dāng)前的item的固定寬度






.wrap-box .item-3{
  flex-basis: 200px;
}



flex-grow

該屬性是決定當(dāng)前item的放大比例，默認(rèn)是0



比如三個(gè)div,左右固定，中間內(nèi)容自動(dòng)撐開



flex-shrink

當(dāng)前item的縮小比例，默認(rèn)的是0

align-self

能控制單個(gè)item的排列，這個(gè)屬性通常不是很常用，面試曾被這個(gè)css的屬性布局問題給跪了

面試題大概是這樣的，3個(gè)子div實(shí)現(xiàn)一個(gè)對(duì)角線布局,用flex布局,如果沒想到這個(gè)align-self大概是實(shí)現(xiàn)不了

.wrap-box {
    width: 500px;
    height: 500px;
    overflow: hidden;
    background-color: green;
    display: flex;
    justify-content: space-between;
}
 .wrap-box .item-1,
  .wrap-box .item-2,
  .wrap-box .item-3 {
    width: 100px;
    height: 100px;
    background-color: red;
}
.wrap-box .item-2 {
  align-self: center; // 垂直居中
}
.wrap-box .item-3 {
  align-self: flex-end; // 靠右
}
設(shè)置對(duì)應(yīng)的item大概就是下面這樣了




關(guān)于flex:1的詳解
通常我們?cè)O(shè)置flex:1，其實(shí)本質(zhì)上是替代了以下幾個(gè)參數(shù)

.item3 {
  flex-grow:1;
  flex-shrink:1;
  flex-basis: 0%;
}
元素垂直居中
以下是一個(gè)基本的頁面結(jié)構(gòu)

<div class="wrap">
    <div class="inner-box"></div>
</div>
 .wrap {
        width: 100px;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: red;
}
.wrap .inner-box {
  width: 50px;
  height: 50px;
  background: green;
}



總結(jié)
了解flex基本特征，影響水平軸與交叉軸的的屬性主要受flex-direction這個(gè)屬性的，默認(rèn)水平row排列

當(dāng)一個(gè)父級(jí)元素設(shè)置flex后，子級(jí)的浮動(dòng)、clear,vertain-align屬性都會(huì)失效，默認(rèn)所有子級(jí)元素水平排列

flex的一些特性，比如放大flex-glow、縮小flex-shrink,還有影響水平軸排列just-content，以及交叉軸排列align-items屬性的設(shè)置

align-self 這個(gè)屬性可以單獨(dú)控制當(dāng)前元素的位置

flex實(shí)現(xiàn)一個(gè)垂直居中

本文code example[1]

最后，看完覺得有收獲的，點(diǎn)個(gè)贊，在看，轉(zhuǎn)發(fā)，收藏等于學(xué)會(huì)，歡迎關(guān)注Web技術(shù)學(xué)苑，好好學(xué)習(xí)，天天向上！
參考資料
[1]code example： https://github.com/maicFir/lessonNote/tree/master/html/04-flex布局

作者：Maic


歡迎關(guān)注微信公眾號(hào) ：web技術(shù)學(xué)苑