CSS 自測題 -- 用 flex 布局繪制骰子（一、二、三【含斜三點】、四、五、六點）

一點

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>css flex布局-畫骰子</title><style>.box {margin: 20px;height: 100px;width: 100px;border: 2px solid grey;border-radius: 10px;/* 容器內元素使用flex布局 */display: flex;/* 主軸居中對齊 */justify-content: center;}.point {border-radius: 50%;height: 20px;width: 20px;background: black;/* align-self 寫在子元素上，覆蓋父元素指定的交叉軸對齊方式 */align-self: center;}</style></head><body><div class="box"><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>css flex布局-畫骰子</title><style>.box {margin: 20px;height: 100px;width: 100px;border: 2px solid grey;border-radius: 10px;/* 容器內元素使用flex布局 */display: flex;/* 主軸改為縱向 */flex-direction: column;/* 主軸（縱向）絕對均勻對齊（子元素間距以及兩端邊緣間距都相等） */justify-content: space-evenly;/* 交叉軸（橫向）居中對齊 */align-items: center;}.point {border-radius: 50%;height: 20px;width: 20px;background: black;}</style></head><body><div class="box"><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>css flex布局-畫骰子</title><style>.box {margin: 20px;height: 100px;width: 100px;border: 2px solid grey;border-radius: 10px;/* 容器內元素使用flex布局 */display: flex;/* 主軸改為縱向 */flex-direction: column;/* 主軸（縱向）絕對均勻對齊（子元素間距以及兩端邊緣間距都相等） */justify-content: space-evenly;/* 交叉軸（橫向）居中對齊 */align-items: center;}.point {border-radius: 50%;height: 20px;width: 20px;background: black;}</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>css flex布局-畫骰子</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;/* 主軸（橫向）相對均勻對齊（子元素間距相等，兩端邊緣間距為子元素間距的一半） */justify-content: space-between;}/* 第一個子元素，交叉軸默認起點對齊 */.point {border-radius: 50%;height: 20px;width: 20px;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>css flex布局-畫骰子</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;}.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><div class="row"><div class="point"></div><div class="point"></div></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>css flex布局-畫骰子</title><style>.box {margin: 20px;height: 100px;width: 100px;border: 2px solid grey;border-radius: 10px;padding: 10px 16px;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: 20px;width: 20px;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>

六點

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>css flex布局-畫骰子</title><style>.box {margin: 20px;height: 100px;width: 100px;border: 2px solid grey;border-radius: 10px;padding: 10px 16px;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><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.pswp.cn/news/713346.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/713346.shtml
英文地址，請注明出處：http://en.pswp.cn/news/713346.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！