TOP > ウェブデザイン > コーディング > 【CSS】フレックスボックス（display:flex）で結局使う「幅いっぱい＆隙間あり＆左詰め」のコピペ用コードメモ

【CSS】フレックスボックス（display:flex）で結局使う「幅いっぱい＆隙間あり＆左詰め」のコピペ用コードメモ

2024/4/1

2024/4/2

190 views

「幅いっぱい＆隙間あり＆左詰め」で指定

”脱float”宣言をして、ようやくフレックスボックス（display:flex）に慣れてきたZIGZOWです。

フレックスボックスは、floatのように回り込み解除などしなくてよかったり、中の要素の高さも揃えてくれるなど、たしかに便利ですね。

しかし、指定できるプロパティが多数あるので、それらを覚えるのが結構大変です。

少しコードを触らない期間があると、フレックスボックスの書き方を忘れてしまいます。

そこで、今回は結局使うレイアウトのフレックスボックスのコピペコードをメモしておきます。

結局使うのは「幅いっぱい＆隙間あり＆左詰め」

フレックスボックス（display:flex）は、ウェブデザインの各部分で使いますが、結局一番使うことになるのは、アーカイブ（記事の一覧）のレイアウトではないでしょうか。

そしてほぼ、この場合のレイアウトとしては「幅いっぱい＆隙間あり＆左詰め（左寄せ）」の条件にしたいかと思います。

あとは、列の要素の数を３つだったり、４つだったり、何等分にするか指定できれば良いですよね。

なので、今回はこれらのレイアウトを実現するための丸コピできるコードを残しておきます。

HTMLサンプルコード

<div class="wrap">
<div class="box">記事０１</div>
<div class="box">記事０２</div>
<div class="box">記事０３</div>
<div class="box">記事０４</div>
<div class="box">記事０５</div>
<div class="box">記事０６</div>
<div class="box">記事０７</div>
<div class="box">記事０８</div>
<div class="box">記事０９</div>
<div class="box">記事１０</div>
<div class="box">記事１１</div>
<div class="box">記事１２</div>
</div>

２等分で「幅いっぱい＆隙間あり＆左詰め」のコード

.wrap {
    display: flex;
    flex-wrap: wrap/* 折り返し */;
    justify-content: space-between/* 幅いっぱい */;
    row-gap: 10px/* 行の隙間 */;

    background: #cac;
}
.box {
    flex-basis: calc((100% - 20px) / 2)/* 隙間幅（１つ分）＆等分数 */;
    max-width: calc((100% - 20px) / 2)/* 隙間幅（１つ分）＆等分数 */;
    text-align: center;
    padding: 100px 0;
    background: #eec;
}

３等分で「幅いっぱい＆隙間あり＆左詰め」のコード

.wrap {
    display: flex;
    flex-wrap: wrap/* 折り返し */;
    justify-content: space-between/* 幅いっぱい */;
    row-gap: 10px/* 行の隙間 */;

    background: #cac;
}
.box {
    flex-basis: calc((100% - 40px) / 3)/* 隙間幅(２つ分の合計)＆等分数 */;
    max-width: calc((100% - 40px) / 3)/* 隙間幅(２つ分の合計)＆等分数 */;

    text-align: center;
    padding: 100px 0;
    background: #eec;
}

/* 最終行の要素を左詰めにする */
.box:nth-of-type(3n-1):nth-last-of-type(1){
    margin-right: auto;
    margin-left: 20px/* 上記の隙間幅の半分の値にする */;
}

４等分で「幅いっぱい＆隙間あり＆左詰め」のコード

.wrap {
    display: flex;
    flex-wrap: wrap/* 折り返し */;
    justify-content: space-between/* 幅いっぱい */;
    row-gap: 10px/* 行の隙間 */;
    
    background: #cac;
}
.box {
    flex-basis: calc((100% - 90px) / 4)/* 隙間幅(3つ分の合計)&等分数 */;
    max-width: calc((100% - 90px) / 4)/* 隙間幅(3つ分の合計)&等分数 */;

    text-align: center;
    padding: 100px 0;
    background: #eec;
}

/* 最終行の要素を左詰めにする */
.box:nth-of-type(4n-1):nth-last-of-type(1),
.box:nth-of-type(4n-2):nth-last-of-type(1) {
    margin-right: auto;
    margin-left: 30px/* 上記の隙間幅の3分の1の値にする */;
}
.box:nth-of-type(4n-2):nth-last-of-type(2){
    margin-right: 0;
    margin-left: 30px/* 上記の隙間幅の3分の1の値にする */;
}

５等分で「幅いっぱい＆隙間あり＆左詰め」のコード

.wrap {
    display: flex;
    flex-wrap: wrap/* 折り返し */;
    justify-content: space-between/* 幅いっぱい */;
    row-gap: 10px/* 行の隙間 */;

    background: #cac;
}
.box {
    flex-basis: calc((100% - 80px) / 5)/* 隙間幅(4つ分の合計)&等分数 */;
    max-width: calc((100% - 80px) / 5)/* 隙間幅(4つ分の合計)&等分数 */;

    text-align: center;
    padding: 100px 0;
    background: #eec;
}

/* 最終行の要素を左詰めにする */
.box:nth-of-type(5n-1):nth-last-of-type(1),
.box:nth-of-type(5n-2):nth-last-of-type(1),
.box:nth-of-type(5n-3):nth-last-of-type(1) {
    margin-right: auto;
    margin-left: 10px/* 上記の隙間幅の4分の1の値にする */;
}
.box:nth-of-type(5n-2):nth-last-of-type(2),
.box:nth-of-type(5n-3):nth-last-of-type(3) {
    margin-right: 0;
    margin-left: 10px/* 上記の隙間幅の4分の1の値にする */;
}