【CSS入門】Flexbox等分幅で横並びに配置する方法

2024-02-062024-08-24

このページにはプロモーションが含まれています。

はじめに

とらまる

子要素を同じ幅で、横並びに配置したい！

今回は、Flexboxを使って子要素を等分幅で配置するためのコードをご紹介します。

🔽 3等分で横並びの例

コードのご紹介

早速、親要素flex-containerと子要素flex-itemを例にご紹介します。

HTML

 <div class="flex-container">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
        <div class="flex-item">5</div>
        <div class="flex-item">6</div>
        <div class="flex-item">7</div>
        <div class="flex-item">8</div>
        <div class="flex-item">9</div>
        <div class="flex-item">10</div>
        <div class="flex-item">11</div>
        <div class="flex-item">12</div>
    </div>

CSS

.flex-container {
    display: flex;
    flex-wrap: wrap;　/* 複数行に折り返す */
    text-align: center;
    background-color: #eddcbc;
    line-height: 200px;
}

.flex-item {
    width: calc((100% - 10%) / 3);
    height: auto;
    margin-right: 5%;
    margin-bottom: 30px;
    font-size: 48px;
    color: #fff;
    background-color: #ff9933;
}

.flex-item:nth-child(3n) {
    margin-right: 0;
}

.flex-item:nth-last-child(-n+3) {
    margin-bottom: 0;
}

コードの補足説明

例えば４等分にしたい時は、

.flex-item {
    width: calc((100% - 15%) / 4);
    height: auto;
    margin-right: 5%;
    font-size: 48px;
    color: #fff;
    background-color: #ff9933;
    margin-bottom: 30px;
}

.flex-item:nth-child(4n) {
    margin-right: 0;
}

.flex-item:nth-last-child(-n+4) {
    margin-bottom: 0;
}

上記のように記述します。すると、