【CSS】Flexboxで横並び表現

【CSS】Flexboxで横並び表現

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

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

はじめに

▼ 本記事を書くにあたって、こちらの書籍を参考にさせて頂きました。

「Flexbox」をはじめ、「レスポンシブデザイン」や「CSSグリッド」など、最新のCSSレイアウトモードが学習できます。また、デザインについても詳しく学べます。実際に現場で役立つHTMLやCSSを中心に紹介してますので、ご自身のWebサイトにも役立つと思います。オススメです!

ベースとなる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;
}

Flexboxで要素の横並び表現
Flexboxで要素の横並び表現

画像のように、floatプロパティを使うより圧倒的にカンタンに要素の横並びが実現できました。【CSS】メニューボタンをfloatで横並び表現するやり方の記事をご覧になって、floatを使った場合と比較してみてください。

子要素の並ぶ向き flex-direction

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

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

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

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

「flex-direction: row-reverse;」を指定
「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;
}

「flex-wrap: wrap-reverse;」を指定
「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;
}

「justify-content: space-between;」を指定
「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-items: center;」を指定

画像のように、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;
}

「align-content: space-between;」を指定
「align-content: space-between;」を指定

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

以上でFlexboxの基本的な使い方の説明をおわります。floatでレイアウトをするよりも、Flexboxのほうが感覚的にわかりやすく使えて便利ですね。

ほとんどの主要なブラウザがFlexboxに対応しているので、積極的に使っていきたいと思います。

Flexboxのブラウザ対応状況
Flexboxのブラウザ対応状況

「キッチンノート.fun」という料理サイトを立ち上げました!このサイトで紹介していた料理記事は、そちらへ移動しました。
記事に関するご質問などがあれば、
Twitter または お問い合わせ までご連絡ください。
オススメ!Webデザインの本

デザインの目的は相手に伝えること。美しく装飾することだけがデザインではないのです。そして、デザインはセンスよりも知識が必要です。

ここではWebデザインをつくる上で、実際に役に立ったと思う本をご紹介します。

▼ コードを見ながら手を動かし、作りながら学べる内容になってます。Webデザインの知識からHTMLやCSSの技術的なことまでを、体系的に順序立てて学ぶことができます。実際の制作現場の流れが体験できる本です。「レスポンシブデザイン」「Flexbox」「CSSグリッド」についても学べます。

▼ デザインの本といえばこちら。とても有名な古典的名著です。デザインを良くするための4つの基本原則を徹底解説しています。DTPをはじめ、Webデザインやプレゼン資料づくりにも役立ちます。

関連記事