flex布局，骰子图案

Question

请大家帮我分析一下四图案的实现过程，为什么要分成两个类来写
（box类和column类）？flex-basis:100%又是什么意思  ？可以理解为height:100% ；width:100%吗？

而六图案就不用分成两个类，比四图案实现简单了。是不是因为六图案第一行堆满了，所以设置了flex-wrap:wrap就自动换行了？

Answer 1

至于六图案不用分类是因为每一行只能放置3个点，6个刚好堆满两行，所以只要交叉轴上下对齐就可以啦（不需要像四图案一样还要两端对齐）

Answer 2

flex-basis:100%是占用主轴空间的100%，在这里可以理解为占用宽度为100%。box类是整个的大盒子，里面有2个column类，每个column类在这里就是一行（因为宽度100%），根据align-content：space-between后，这两行就上下对齐了，然后.column{display: flex;            flex-direction:column;            justify-content:space-between;} 每一行里的两个筛点两端对齐、

Answer 3

不好意思啊。其实这个我也不是很了解（捂脸）。然后，我去找了下源代码        <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主轴为垂直方向，起点在上沿。也就是三列。