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

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

2024/4/1

2024/10/14

1005 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;/* 行の隙間 */
}
.box {
    flex-basis: calc((100% - 20px) / 2);/* 20pxの隙間 / 等分数（2） */
    max-width: calc((100% - 20px) / 2);/* 20pxの隙間 / 等分数（3） */

/* 以下は仮の装飾用コード */
    text-align: center;
    padding: 100px 0;
    background: #eec;
}

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

.wrap {
    display: flex;
    flex-wrap: wrap;/* 折り返し */
    justify-content: space-between;/* 幅いっぱい */
    row-gap: 10px;/* 行の隙間 */
}
.box {
    flex-basis: calc((100% - 40px) / 3);/* 20pxの隙間2つ分の合計 / 等分数（3） */
    max-width: calc((100% - 40px) / 3);/* 20pxの隙間2つ分の合計 / 等分数（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;/* 行の隙間 */
}
.box {
    flex-basis: calc((100% - 90px) / 4);/* 30pxの隙間3つ分の合計 / 等分数（4） */
    max-width: calc((100% - 90px) / 4);/* 30pxの隙間3つ分の合計 / 等分数（4） */

/* 以下は仮の装飾用コード */
    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;/* 隙間幅 */
}
.box:nth-of-type(4n-2):nth-last-of-type(2){
    margin-right: 0;
    margin-left: 30px;/* 隙間幅 */
}

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

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

/* 以下は仮の装飾用コード */
    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: 20px;/* 隙間幅 */
}
.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: 20px;/* 隙間幅 */
}