首页 > 开发 > CSS > 正文

CSS3的Flexbox骰子布局的实现及问题讲解

2024-07-11 08:32:47

字体：大中小

来源：转载

供稿：网友

本文中只是熟悉基本属性的用法，并完成一组骰子各个面的制作。在下面的内容我不会涉及flexbox一些比较棘手的问题，比如旧版本语法、供应商前缀、浏览器怪癖等：

一、First Face
我们知道，骰子有六个面，每个面的点的个数代表该面的值，第一个面由一个水平垂直居中的点组成。下面来看具体的实现：

CSS Code复制内容到剪贴板

<section name="01" class="face-01"> <span class="dot"></span>
</section> face-01 {
display: flex; justify-content: center;
align-items: center;

关于justify-content和align-items的用法请参考这里justify-content，align-items。使用flexbox，垂直居中两行属性就可以搞定，很easy!

二、Second Face

CSS Code复制内容到剪贴板

.face-02 { display: flex;
justify-content: space-between; }
.face-02 .dot:nth-of-type(2) { align-self: flex-end;
} <section name="02" class="face-02">
<span class="dot"></span> <span class="dot"></span>
</section>

这里我们不能使用align-items属性，使用它两个点都会受影响，flexbox提供了一个align-self属性，这个属性可以让我们更方便的控制flex items的各项沿着cross axias方向，设置不同的布局。align-self的用法参考这里align-self。

三、Third Face

CSS Code复制内容到剪贴板

.face-03 { display: flex;
justify-content: space-between; }
.face-03 .dot:nth-of-type(2) { align-self: center;
} .face-03 .dot:nth-of-type(3) {
align-self: flex-end; }
<section name="03" class="face-03"> <span class="dot"></span>

上一篇：CSS隐藏页面文字的几种方式总结

下一篇：详解CSS中的选择器优先级顺序

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注

新闻热点

最牛同桌！我考了696分我同桌考了703分

2024-06-26 22:28:41

650分！高二女生考入北大：遗憾不能上高三

2024-06-26 22:26:16

男生估分600只考了397 妈妈：高考虽重要，但不代表所有

2024-06-26 22:23:01

唐尚珺回应是否会直播带货：有人出100万想和他合作！

2024-06-25 19:29:23

名校抢人名场面：清华、北大太拼了！

2024-06-25 19:22:14

男生高考语文满分！网友：第一次听说

2024-06-25 19:19:15

疑难解答

图片精选

网友关注