<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box {
height: 100px;
width: 100px;
border: 2px solid grey;
border-radius: 10px;
display: flex;
justify-content: center; // 水平居中
/* align-items: center; */
}
.point {
width: 20px;
height: 20px;
border-radius: 50%;
background: black;
/* align-self 寫在子元素上，覆蓋父元素指定的交叉軸對齊方式 */
align-self: center;
}
</style>
</head>
<body>
<div class="box">
<div class="point"></div>
</div>
</body>
</html>?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box {
height: 100px;
width: 100px;
border: 2px solid grey;
border-radius: 10px;
display: flex;
/* 主軸改為縱向 */
flex-direction: column;
/* 等分 */
justify-content: space-evenly;
/* 垂直居中 */
align-items: center;
}
.point {
width: 20px;
height: 20px;
border-radius: 50%;
background: black;
}
</style>
</head>
<body>
<div class="box">
<div class="point"></div>
<div class="point"></div>
</div>
</body>
</html>?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box {
height: 100px;
width: 100px;
border: 2px solid grey;
border-radius: 10px;
display: flex;
padding: 10px;
/* 主軸改為縱向 */
flex-direction: column;
/* 子元素間距相等*/
justify-content: space-between;
}
.point {
width: 25px;
height: 25px;
border-radius: 50%;
background: black;
}
.point:nth-child(2) {
/* 居中對齊 */
align-self: center;
}
.point:nth-child(3) {
/* 終點對齊 */
align-self: flex-end;
}
</style>
</head>
<body>
<div class="box">
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<style>
.box {
margin: 20px;
height: 100px;
width: 100px;
border: 2px solid grey;
border-radius: 10px;
padding: 10px;
box-sizing: border-box;
display: flex;
/* 縱向 */
flex-wrap: wrap;
/* 相對均勻對齊 */
align-content: space-between;
}
.row {
/* 空間大小 */
flex-basis: 100%;
display: flex;
justify-content: space-between
}
.point {
border-radius: 50%;
height: 25px;
width: 25px;
background: black;
}
</style>
</head>
<body>
<div class="box">
<div class="row">
<div class="point"></div>
<div class="point"></div>
</div>
<div class="row">
<div class="point"></div>
<div class="point"></div>
</div>
</div>
</body>
</html>?
文章來源：http://www.zghlxwxcb.cn/news/detail-838060.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<style>
.box {
margin: 20px;
height: 100px;
width: 100px;
border: 2px solid grey;
border-radius: 10px;
padding: 10px;
box-sizing: border-box;
/* 容器內元素使用flex布局 */
display: flex;
/* 將主軸改為縱向 */
flex-direction: column;
/* 主軸（縱向）絕對均勻對齊（子元素間距以及兩端邊緣間距都相等） */
justify-content: space-evenly;
}
.row1 {
/* 每行內元素使用flex布局 */
display: flex;
/* 主軸（橫向）相對均勻對齊 */
justify-content: space-between;
}
.row2 {
/* 每行內元素使用flex布局 */
display: flex;
/* 主軸（橫向）居中對齊 */
justify-content: center;
}
.point {
border-radius: 50%;
height: 25px;
width: 25px;
background: black;
}
</style>
</head>
<body>
<div class="box">
<div class="row1">
<div class="point"></div>
<div class="point"></div>
</div>
<div class="row2">
<div class="point"></div>
</div>
<div class="row1">
<div class="point"></div>
<div class="point"></div>
</div>
</div>
</body>
</html>
文章來源地址http://www.zghlxwxcb.cn/news/detail-838060.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<style>
.box {
margin: 20px;
height: 100px;
width: 100px;
border: 2px solid grey;
border-radius: 10px;
padding: 10px;
box-sizing: border-box;
/* 容器內元素使用flex布局 */
display: flex;
/* 將主軸改為縱向 */
flex-direction: column;
/* 主軸（縱向）相對均勻對齊 */
justify-content: space-between;
}
.row {
/* 每行內元素使用flex布局 */
display: flex;
/* 主軸（橫向）絕對均勻對齊 */
justify-content: space-evenly;
}
.point {
border-radius: 50%;
height: 20px;
width: 20px;
background: black;
}
</style>
</head>
<body>
<div class="box">
<div class="row">
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
</div>
<div class="row">
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
</div>
<div class="row">
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
</div>
</div>
</body>
</html>到了這里，關于CSS 用 flex 布局繪制骰子的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
