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

練習問題

CSSレイアウト練習問題 Flexboxで互い違いの3行(レベル初級)

flex-boxを使用して、横並びの2つのboxを縦に3段表示してください。
各boxの余白は15pxとしてください。

解答
index.html
<div class="parent-box">
<div class="box box-A"></div>
<div class="box box-B"></div>
</div>
<div class="parent-box">
<div class="box box-B"></div>
<div class="box box-A"></div>
</div>
<div class="parent-box">
<div class="box box-A"></div>
<div class="box box-B"></div>
</div>

"parent-box"クラスをflexにしています。flex内の小要素(box)は左詰めで横並びとなります。
parent-box同士は通常通り縦に並びます。
各小要素(box)にclassを2つつけてあります。共通スタイル(色、margin、高さ)は共通クラス("box")に、個別のスタイル(幅)はそれぞれのクラス(box-Aもしくはbox-B)に記述します。

style.css
.parent-box {
display: flex;
margin-top: 15px;
}

.box {
background: #7AA7D7;
margin-right: 15px;
height: 100px;
}

.box-A {
width: 200px;
}

.box-B {
width: 400px;
}
 


この練習問題でのポイントは、親要素(今回であればparent-box)にdisplay: flex-boxをつけると、その中身は左詰めになりますが、親要素同士は特別な記述をしなくても通常通り縦に並ぶことです。