【CSS】Flexboxで横並び表現

Toshihiko Arai

投稿日: 2021-09-20

はじめに

この記事では、CSSで要素の横並びが簡単にできるFlexboxの使い方を解説していきます。

Flexboxとは「Flexible Box Layout Module」の略で、 floatプロパティで表現していた横並びのレイアウト処理を、簡単に行うことができるCSSプロパティです。 FlexboxはCSS3で導入されたレイアウトモードです。

ベースとなるHTMLとCSSの準備

これからFlexboxでレイアウトを組んでいきますが、ベースとなるHTMLとCSSを次のように用意しました。

<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
</div>

.container {
    background: cornsilk;
    border: 1px solid coral;
}
.item {
    color: rgb(31, 45, 61);
    background: coral;
    margin: 10px;
    padding: 10px;
}

Flexboxで横並び display: flex;

それでは子要素であるitemクラスを横並べにしてみましょう。親要素の.containerクラスにdisplay: flex;を記述するだけです。

.container {
    ...
    display: flex;
}

画像のように、floatプロパティを使うより圧倒的に簡単に要素の横並びが実現できました。の記事をご覧になって、floatを使った場合と比較してみてください。

子要素の並ぶ向き flex-direction

flex-directionプロパティを使うと、子要素の並び方向を変えることができます。flex-directionには次のような値を設定できます。

値	動作
row（初期値）	子要素を左から右に配置
row-reverse	子要素を右から左に配置
column	子要素を上から下に配置
column-reverse	子要素を下から上に配置

それでは実際にflex-directionを使ってみましょう。

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

画像のように、row-reverseの値を指定すると右から左へ順番に子要素を配置することができました。

子要素の折り返し flex-wrap

flex-wrapプロパティを使って子要素が折り返されたときの挙動を変えてみます。flex-wrapプロパティで使える値は、次の表のとおりです。

値	動作
nowrap（初期値）	子要素を折り返さず、1行に並べる
wrap	子要素を折り返し、複数行に上から下へ並べる
wrap-reverse	子要素を折り返し、複数行に下から上へ並べる

今度は子要素を9個に増やしてflex-wrapを使ってみました。

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

画像のように、wrap-reverseの値を指定すると、折り返しつつ下から上へ子要素が配置されました。

水平方向の揃え justify-content

justify-contentプロパティを使うと、空きスペースがあった場合に、水平方向で揃えることができます。justify-contentプロパティで使える値は次の表のとおりです。

値	動作
flex-start（初期値）	左揃え
flex-end	右揃え
center	中央揃え
space-between	両端と均等配置
space-around	均等配置

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

画像のように、space-betweenの値を指定すると、両端に子要素が固定され、残りは均等配置されました。

垂直方向の揃え align-items

align-itemsプロパティを使うと、空きスペースがあった場合に、垂直方向で揃えることができます。align-itemsプロパティで使える値は次の表のとおりです。

値	動作
stretch（初期値）	親要素の高さいっぱいに広げて配置
flex-start	上揃え
flex-end	下揃え
center	中央揃え
baseline	ベースラインで揃える

.container {
    ...
    display: flex;
    align-items: center;
    height: 300px;
}

画像のように、align-items: center;を指定すると、親要素の高さの中央位置に子要素が配置されます。

複数行での揃え align-content

align-contentプロパティでは、子要素が複数行にまたがった場合の垂直方向の揃えを制御します。align-contentプロパティで使える値は次のとおりです。

値	動作
stretch（初期値）	親要素の高さにあわせて広げて配置
flex-start	上揃え
flex-end	下揃え
center	中央揃え
space-between	上下は端に配置、残りは均等間隔で配置
space-around	均等間隔で配置

.container {
    ...
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    height: 300px;
}

画像のように、space-betweenの値を指定すると、上下の端に子要素が配置され、残りの子要素は垂直方向に均等間隔で配置されます。

以上でFlexboxの基本的な使い方の説明をおわります。floatでレイアウトをするよりも、Flexboxのほうが感覚的にわかりやすく使えて便利ですね。ほとんどの主要なブラウザがFlexboxに対応しているので、積極的に使っていきます。 https://caniuse.com/flexbox

【CSS】擬似要素before/afterの使い方