【CSS】フレックスボックスとグリッドで自由にレイアウトを整える

はじめに

まずは以下のようなサンプルコードを書いてみます。

        <div class="container">
            <div class="sample">sample1</div>
            <div class="sample">sample2</div>
            <div class="sample">sample3</div>
            <div class="sample">sample4</div>
            <div class="sample">sample5</div>
            <div class="sample">sample6</div>
        </div>

.sample {
    background: skyblue;
    margin: 10px;
    padding: 10px;
}

結果。

ここから、要素の配置を色々と変えていきます。
このとき、CSSでfloat: left;みたいなことをするよりも、フレックスボックスやグリッドを使った方が、簡単に自由なレイアウトができるみたいです。

フレックスボックス

CSSに以下のコードを追加します。

.container {
    display: flex;
}

結果。

横並びになりました。
さらにいろいろいじっていきます。

並び順を逆にする(横)

.container {
    display: flex;
    flex-direction: row-reverse;
}

並び順を逆にする(縦)

.container {
    display: flex;
    flex-direction: column-reverse;
}

折り返す

.container {
    display: flex;
    flex-wrap: wrap;
}

中央揃え(水平)

.container {
    display: flex;
    justify-content: center;
}

右揃え(水平)

.container {
    display: flex;
    justify-content: flex-end;
}

両端均等揃え

.container {
    display: flex;
    justify-content: space-between;
}

均等揃え

.container {
    display: flex;
    justify-content: space-around;
}

高さを広げる

.container {
    display: flex;
    align-items: stretch;
    height: 20vh;
}

上に揃える

.container {
    display: flex;
    align-items: flex-start;
    height: 20vh;
}

下に揃える

.container {
    display: flex;
    align-items: flex-end;
    height: 20vh;
}

中央揃え(垂直)

.container {
    display: flex;
    align-items: center;
    height: 20vh;
}

グリッド

CSSを以下のようにします。

.container {
    display: grid;
}

特に変わりません。色々といじっていきます。

子要素の横幅と余白

.container {
    display: grid;
    grid-template-columns: 200px 200px 200px;
    gap: 20px;
}

子要素の横幅の比率

.container {
    display: grid;
    grid-template-columns: 1fr 2fr 3fr;
    gap: 10px;
}

おまけ

おすすめの本です。どちらかというとCSSに重点が置かれている感じがします。デザインについての説明が豊富なのが特徴です。
1冊ですべて身につくHTML-CSSとWebデザイン入門講座