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真的贼好用啊。。