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