CSS之flex佈局

最近用flex算是用的挺熟練啦，雖然很簡單，但還是記錄一下。

• x行y列（自動換行的那種）
  

 <div class="chunk">
        <div class="chunk-item" v-for="item of chunkData">
          <h3>{{item.title}}</h3>
          <span>{{item.desc}}</span>
        </div>
    </div>

.chunk {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.chunk-item {
  background-color: white;
  width: 48%;
  height: 80px;
  margin-top: 10px;
  border-radius: 5px;
}

需要注意的是chunk的width我用的是100%，因爲還有父元素，width，height要根據實際情況寫。

• 左右分割
  

   <div class="item-cage">
       <div class="item-icon">
         <img class="item-logo" :src="content[0].logo"/>
       </div>
       <div class="item-content">
         <h6>肖申克的救贖</h6>
         <label class="smaller-label">希望是美好的，也許是人間至善，而美好的事物永不消逝</label>
         <div class="item-mark">
              <span>自由</span>
              <span>英雄夢想</span>
              <span>希望</span>
          </div>
       </div>
    </div>

.item-cage {
    display: flex;
    flex: 1;
  }
  .item-icon {
    flex: 0.25;
    height: 80px;
  }
  .item-content {
    flex: 0.75;
    height: 80px;
  }

emmm左右分割用flex分就行，至於每個div裏面的內容不貼代碼了，都很簡單的。

• 看到現在寫的，想到最開始接觸flex就是湊合着用，現在理解了就可以活着用啦，寫起來不糊塗了。justify-content真的賊好用啊。。