请大家帮我分析一下四图案的实现过程,为什么要分成两个类来写(box类和column类)?flex-basis:100%又是什么意思 ?可以理解为height:100% ;width:100%吗?而六图案就不用分成两个类,比四图案实现简单了。是不是因为六图案第一行堆满了,所以设置了flex-wrap:wrap就自动换行了?
4 回答
枫芒i
TA贡献2条经验 获得超0个赞
flex-basis:100%是占用主轴空间的100%,在这里可以理解为占用宽度为100%。box类是整个的大盒子,里面有2个column类,每个column类在这里就是一行(因为宽度100%),根据align-content:space-between后,这两行就上下对齐了,然后
.column{
display: flex;
flex-direction:column;
justify-content:space-between;
} 每一行里的两个筛点两端对齐、
侠客岛的含笑
TA贡献552条经验 获得超285个赞
不好意思啊。其实这个我也不是很了解(捂脸)。然后,我去找了下源代码
<div class="container six box6"> <div class="column"> <span class=" item"></span> <span class=" item"></span> </div> <div class="column"> <span class=" item"></span> <span class=" item"></span> </div> <div class="column"> <span class=" item"></span> <span class=" item"></span> </div> </div>
.box6{ display: flex; flex-warp:wrap; align-content:space-between; } .box6 .column{ display: flex; flex-direction:column; justify-content:space-between; }
flex-direction主轴为垂直方向,起点在上沿。也就是三列。
- 4 回答
- 3 关注
- 3026 浏览
添加回答
举报
0/150
提交
取消