ウェブログラム ~学習するな実践せよ~

練習問題

CSSレイアウト練習問題 縦並びのbox(レベル初級)

flex-boxを使用して、親boxの中に子boxを縦並びで表示してください。
上下の余白は、親box-子boxを10px、子box-子boxを20pxとしてください。
親boxに対して子boxは中央に配置してください。

解答
index.html
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>

クラスのcontainerをflexにしています。flex-direction: columnにすることで、flexbox内の子要素は縦並びになります。
縦並びの要素を中央揃えにする時は、align-items: centerを使います。
justify-content: space-aroundとすることで、子要素の上下(縦並べであることに注意)に均等に余白が割り振られます。

style.css
.container {
width: 500px;
height: 480px;
background: #FFD966;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}

.box {
width: 200px;
height: 100px;
background: #6D9EEB;
}

この問題のポイントは、縦並べにしたい要素の親要素にdisplay: flex、flex-direction: columnをつけることです。