【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;
}
画像のように、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-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;
}
垂直方向の揃え align-items
align-itemsプロパティを使うと、空きスペースがあった場合に、垂直方向で揃えることができます。align-itemsプロパティで使える値は次の表のとおりです。| 値 | 動作 |
|---|---|
| stretch（初期値） | 親要素の高さいっぱいに広げて配置 |
| flex-start | 上揃え |
| flex-end | 下揃え |
| center | 中央揃え |
| baseline | ベースラインで揃える |
.container {
...
display: flex;
align-items: center;
height: 300px;
}
複数行での揃え 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;
}
以上でFlexboxの基本的な使い方の説明をおわります。floatでレイアウトをするよりも、Flexboxのほうが感覚的にわかりやすく使えて便利ですね。
ほとんどの主要なブラウザがFlexboxに対応しているので、積極的に使っていきます。
