摘要：而通過(guò)實(shí)現(xiàn)則簡(jiǎn)單多了源碼原因解釋中間一欄為核心，所以需要優(yōu)先渲染，結(jié)構(gòu)也就放在了前面，主要是使用屬性將放置到前方。源碼的列數(shù)每列的個(gè)數(shù)函數(shù)原因解釋實(shí)現(xiàn)瀑布流還是比較簡(jiǎn)單的。

這是關(guān)于 Flex 布局的實(shí)踐，原想還水一點(diǎn)字?jǐn)?shù)來(lái)介紹 Flex 相關(guān)屬性，想想還是算了，阮一峰大佬的兩篇文章推上：

Flex 布局教程：語(yǔ)法篇

Flex 布局教程：實(shí)例篇

如何用 CSS 來(lái)增進(jìn)對(duì) Flex 的理解：

CSS 搞事技巧：checkbox+label+selector

CSS 搞事技巧：hover+active

左側(cè)定寬，右側(cè)自適應(yīng)：

源碼

  
left
  
right

.flex-layout
  display flex
.flex__item
  &:nth-child(1)
    background-color #c04851 // 玉紅
    flex 0 0 200px
  &:nth-child(2)
    background-color #440e25 // 古銅紫
    flex 1 1 auto 

原因解釋：

flex 是一個(gè)簡(jiǎn)寫(xiě)屬性，用來(lái)設(shè)置 flex-grow、flex-shrink、flex-basis。一般來(lái)說(shuō)讓元素等高需要額外設(shè)置，而 flex 容器的存在一個(gè)默認(rèn)屬性值：align-items:stretch，它會(huì)幫助你，當(dāng)然也會(huì)給你帶來(lái)糟糕的體驗(yàn)。

圣杯布局與雙飛翼布局都是三欄布局，稍微介紹一下：圣杯布局關(guān)鍵是父元素設(shè)置 padding，接著子元素通過(guò) margin 負(fù)值以及定位；雙飛翼布局關(guān)鍵是中間一欄多了子元素并設(shè)置 margin，然后側(cè)邊欄使用 margin 負(fù)值。而通過(guò) flex 實(shí)現(xiàn)則簡(jiǎn)單多了：

源碼

  
content
  
nav
  
side

.holy-grail
  display flex
  .flex__content
    flex 1 1 auto
    background-color #009999
  .flex__nav, .flex__side
    flex 0 0 120px
  .flex__nav
    order -1
    background-color #1D7373
  .flex__side
    background-color #33CCCC

原因解釋：

中間一欄為核心，所以需要優(yōu)先渲染，DOM 結(jié)構(gòu)也就放在了前面，主要是使用 order 屬性將 nav 放置到前方。

除了整體結(jié)構(gòu)用到這些布局以外，對(duì)于一些組件也常常需要一些簡(jiǎn)單的布局。

模仿示例：

實(shí)現(xiàn)效果圖：

源碼

  

  
Title
  

.header
  height 100px
  width 100%
  background-color #f9f1db // 蚌肉白
  display flex
  align-items center
  > *
    margin 0 10px
  &__avatar, &__more
    flex 0 0 80px
    height 80px
    border-radius 50%
  &__avatar
    background-color #FFAC40
  &__title
    color #FF9000
  &__more
    margin-left auto
    background-color #A65E00

原因解釋：

此處主要是利用了 margin-auto 來(lái)占據(jù)剩余的空間，就與我們使用 margin: 0 auto 來(lái)獲取水平居中一樣。

模仿示例：

實(shí)現(xiàn)效果圖：

源碼

  

    Message
    
    
  

.input-group
  flex 0 0 75%
  height 40px
  border 2px solid red
  border-radius 4px
  display flex
  align-items center
  > *
    box-sizing border-box
  .input-text
    font-size 20px
    padding-left 10px
    height 100%
    flex 1
    outline none 
    border none 
  .icon
    flex 0 0 24px
    height 24px
    border-radius 50%
    background-color #648e93 // 晚波藍(lán)

原因解釋：

這也是一個(gè)常規(guī)的三欄布局，關(guān)鍵是 .input-text 的 flex: 1 屬性可以占據(jù)剩余空間，當(dāng)其余配件不存在時(shí)也可以相應(yīng)的擴(kuò)張。

實(shí)現(xiàn)效果圖：

源碼

  

  

    
1
    
2
    
3
    
4
    
5
    
6
  
  

.flex-card
  display flex
  flex-flow column nowrap
  .header
    flex-basis 80px
    background-color #4E51D8
  .footer
    flex-basis 50px
    background-color #00B060
  .article
    flex auto 
    background-color #FF9000
    display flex
    flex-flow row wrap
    align-content center
    justify-content space-around
    &__item
      width 28%
      height 50px
      box-shadow 0 2px 4px rgba(255, 255, 255, .4), 3px 0 5px rgba(0, 0, 0, .6)

原因解釋：

將主軸修改為垂直方向，header 和 footer 因?yàn)?article 的 flex:auto 屬性被分別頂至上方和下方，可以避免 absolute 的濫用。在中間使用 align-content 區(qū)別于 align-items ，可以將多行元素視為一個(gè)整體。

實(shí)體效果：

在編譯時(shí)會(huì)賦予 CSS 顏色，所以直接刷新頁(yè)面是不可行的，只有重新保存代碼進(jìn)行編譯可以變更顏色。

源碼

$flow-columns = 5; // flow 的列數(shù)
$flow-items = 8; // flow 每列的個(gè)數(shù)

// 函數(shù)
randomColor(min, max) {
  return floor(math(0, "random") * (max - min + 1) + min);
}

randomPx(min, max) {
  return floor(math(0, "random") * (max - min + 1) + min) px;
}

.flex-flow {
  display: flex;
  justify-content: space-between;
  overflow: hidden;

  .flow-column {
    display: flex;
    flex-direction: column;
    flex: 0 0 18.6%;

    .flow-item {
      width: 100%;
      margin: .1rem 0;
    }
  }
}

for column in (1 .. $flow-columns) {
  .flow-column:nth-child({column}) {

    for item in (1 .. $flow-items) {
      .flow-item:nth-child({item}) {
        flex: 0 0 randomPx(30, 100);
        background-color: rgb(
          randomColor(0, 255),
          randomColor(0, 255),
          randomColor(0, 255)
        );
      }
    }
  }
}

原因解釋：

flex 實(shí)現(xiàn)瀑布流還是比較簡(jiǎn)單的。友情提示：當(dāng)使用 stylus 時(shí)還是加上標(biāo)點(diǎn)符號(hào)吧，找編譯錯(cuò)誤花了我近二十分鐘。

在 push 前需要合并 commit：

git log --oneline
git rebase -i xxxxxxx
git log --oneline
git status 
git push

初步地把 CSS 稍微過(guò)了一遍，下一步繼續(xù)完善那個(gè)簡(jiǎn)陋的 簡(jiǎn)歷 了…

VSCode 的友情提示

Vuetify