Flex布局——色子的小案例

落日映苍穹つ 2022-07-15 09:56 170阅读 0赞

制作色子，即制作相对应的1-6的几个点

1、运用知识点

a、容器——container

b、项目——item

代码示例：

</div>

2、主要采用上述两个的属性值进行编辑

例如：flex-direction方向——row、column、row-reverse、column-reverse

jusitfy-content:center——水平居中

flex-wrap：wrap——允许换行

align-items：center——表示对角方向居中(三点时)

align-self：flex-end/start——要覆盖前边的align-items(四点时)

等等。

3、相应的实现代码如下：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .container{ display: flex; padding: 10px; width: 120px;height: 120px; border: 3px solid #ddd; border-radius: 10px; background: #fff; box-shadow: 3px 3px 3px 0px #999; margin: 5px; } .item{ width: 50px;height: 50px; background: #999; border-radius: 50%; /*可以绘制成一个圆形*/ box-shadow: 1px 1px 2px 0px #999; } .one{ justify-content: center; /*水平居中*/ align-items: center; /*交叉轴——垂直居中*/ } .two{ justify-content: space-around; align-items:center; } .two1{ flex-direction: column; justify-content: space-around; align-items: center; } .three{ flex-direction: column; justify-content: space-around;/*主轴方向上分散的对齐*/ align-items: center; } .three div:first-child{ align-self: flex-start; /*覆盖前边的align-item:center;*/ } .three div:last-child{ align-self: flex-end; } .four{ flex-wrap: wrap; /*表示允许换行*/ } .four .item{ margin: 7px; /*设置margin间距变大，即符合换行的条件*/ } .four1,.five,.six{ flex-direction: column; justify-content: space-around; } .four1 >div,.five >div,.six >div{ display: flex; justify-content: space-around; } </style> </head> <body> <div class="container six"> <div> <div class="item"></div> <div class="item"></div> </div> <div> <div class="item"></div> <div class="item"></div> </div> <div> <div class="item"></div> <div class="item"></div> </div> </div> <div class="container five"> <div> <div class="item"></div> <div class="item"></div> </div> <div> <div class="item"></div> </div> <div> <div class="item"></div> <div class="item"></div> </div> </div>  <div class="container four1"> <div> <div class="item"></div> <div class="item"></div> </div> <div> <div class="item"></div> <div class="item"></div> </div> </div>   <div class="container three"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div class="container two1"> <div class="item"></div> <div class="item"></div> </div> <div class="container one"> <div class="item"></div> </div> </body> </html>