Flex レイアウトを使用して CSS レイアウト (6 ポイント) でサイコロを描画し、align-item と align-content の違いを区別する

基礎がない場合は、まずこのドキュメントを読んで勉強してください: Ruan Yifeng Flex Layout Tutorial: Grammar

前の記事CSS レイアウト: Flex レイアウトを使用してサイコロを描く (5 ポイント)

今度は6点のサイコロを引きます。最初に図を見て黙ってコードを書き、次にテキスト内のコードと照合して、Flex レイアウトを理解しているかどうかを確認できます。

サイコロのスタイル:

<div class="box">
	<span class="item"></span>
	<span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
</div>

.box {
    
    
	width: 100px;
    height: 100px;
    border-radius: 20px;
    padding: 10px;
    background-color: rgba(230, 230, 230, 1);
    /* 对四条边进行阴影浮雕修饰 */
    box-shadow: inset 0 5px 2px rgba(250, 250, 250, 1),
        inset 5px 0 2px rgba(215, 215, 215, 1),
        inset -5px 0 2px rgba(215, 215, 215, 1),
        inset 0 -5px 2px rgba(187, 187, 187, 1);
}
.item {
    
    
    width: 30px;
    height: 30px;
    margin: 2px;
    border-radius: 50px;
    background-color: rgba(51, 51, 51, 1);
    box-shadow: inset 0 5px 2px rgba(22, 22, 22, 1), inset 0 -5px 2px rgba(85, 85, 85, 1)
}

1. align-itemsを使用する

複数の主軸がある場合、align-items を使用すると、属性値 space-around と同様に、主軸間の残りのスペースが均等に分散されます。

.box {
    
    
	display: flex;
    flex-wrap: wrap;
    /*space-evenly：平均分配剩余空间 */
    justify-content: space-evenly;
    align-items: center;
}

2. align-contentを使用する

複数の主軸がある場合、align-content を使用すると、複数の軸が 1 つの軸として整列され、軸間に割り当てられる残りのスペースはなくなります。

.box {
    
    
	display: flex;
    flex-wrap: wrap;
    /*space-evenly：平均分配剩余空间 */
    justify-content: space-evenly;
    align-content: center;
}