flex 弹性盒布局——骰子

最新推荐文章于 2025-07-07 14:25:26 发布

原创最新推荐文章于 2025-07-07 14:25:26 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#弹性盒布局

前端特效专栏收录该内容

11 篇文章

订阅专栏

本文通过纯CSS代码展示了如何实现六个不同面的骰子效果。从简单的单点到复杂的六点排列，利用了CSS的flex布局特性，使得整个骰子的设计既美观又易于理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>

<html>



<head lang="en">

<meta charset="UTF-8">

<title>骰子</title>

<style>

* {

margin: 0;

padding: 0;

}



body {

width: 100%;

height: 100%;

display: flex;

padding: 200px;

box-sizing: border-box;

justify-content: space-between;

}



ul,

li {

list-style: none;

}



ul {

width: 150px;

height: 150px;

border-radius: 10px;

background: #eee;

display: flex;

padding: 10px;

box-sizing: border-box;

}



li,

.fiv>li:nth-of-type(2) {

width: 30px;

height: 30px;

background: #333;

border-radius: 50%;

}



.for>li,

.fiv>li {

width: 100%;

height: 30px;

border-radius: 0;

background: none;

}



.six>li {

height: 100%;

width: 30px;

border-radius: 0;

background: none;

}



.for>li>div,

.fiv>li>div,

.six>li>div {

width: 30px;

height: 30px;

background: #333;

border-radius: 50%;

}



/* 一 */



.one>li {

margin: auto;

/* 水平垂直居中 */

}



/* 二 */



.two {

flex-direction: column;

/*改变弹性盒布局轴向*/

}



.two>li {

margin: auto;

}



/* 三 */



.tre>li:nth-of-type(2) {

margin: auto;

}



.tre>li:last-child {

align-self: flex-end;

/*元素单独对其方式*/

}



/* 四 */



.for {

flex-direction: column;

justify-content: space-around;

}



.for>li {

display: flex;

justify-content: space-around;

}



/* 五 */



.fiv {

flex-direction: column;

justify-content: space-between;

}



.fiv>li {

display: flex;

justify-content: space-between;

}



.fiv>li:nth-of-type(2) {

margin: auto;

}



/* 六 */



.six {

flex-direction: row;

justify-content: space-between;

}



.six>li {

display: flex;

flex-direction: column;

justify-content: space-between;

}

</style>

</head>



<body>

<!-- 一 -->

<ul class="one">

<li></li>

</ul>

<ul class="two">

<li></li>

<li></li>

</ul>

<ul class="tre">

<li></li>

<li></li>

<li></li>

</ul>

<ul class="for">

<li>

<div></div>

<div></div>

</li>

<li>

<div></div>

<div></div>

</li>

</ul>

<ul class="fiv">

<li>

<div></div>

<div></div>

</li>

<li></li>

<li>

<div></div>

<div></div>

</li>

</ul>

<ul class="six">

<li>

<div></div>

<div></div>

<div></div>

</li>

<li>

<div></div>

<div></div>

<div></div>

</li>

</ul>

</body>

<script>

</script>



</html>