为了账号安全,请及时绑定邮箱和手机立即绑定

flex布局,骰子图案

flex布局,骰子图案

undertale 2017-04-06 23:36:50
请大家帮我分析一下四图案的实现过程,为什么要分成两个类来写(box类和column类)?flex-basis:100%又是什么意思  ?可以理解为height:100% ;width:100%吗?而六图案就不用分成两个类,比四图案实现简单了。是不是因为六图案第一行堆满了,所以设置了flex-wrap:wrap就自动换行了?
查看完整描述

4 回答

?
枫芒i

TA贡献2条经验 获得超0个赞

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

查看完整回答
反对 回复 2018-07-23
?
枫芒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;

} 每一行里的两个筛点两端对齐、

查看完整回答
反对 回复 2018-07-23
?
侠客岛的含笑

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主轴为垂直方向,起点在上沿。也就是三列。

//img1.sycdn.imooc.com//58ed8dbb0001c4d016260837.jpg

//img1.sycdn.imooc.com//58ed8dbd00018c4204590380.jpg

//img1.sycdn.imooc.com//58ed8dbe00018b4005630333.jpg


查看完整回答
反对 回复 2017-04-12
  • 4 回答
  • 3 关注
  • 3026 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信