ホームへ

CSS display:flexで解決できること9選!

2020年06月25日

display:flexは便利らしいがどんなときに使えるのか。
横並べを中心に、いろいろなことができるので覚えておきましょう。

以下のようなときはCSS display:flexで解決可能です!

1.崩さずに横並びさせたい。tableやfloatではうまくいかない。

floatはちょっとしたことで崩れますし、tableは幅が勝手に変わったり、htmlのソースが多く面倒です。

display:flexなら絶対崩さずに横並べができます。

1
2

html

<div class="flex">
    <div>1</div>
    <div>2</div>
</div>

CSS

.flex{
    display: flex;/*コレ*/
    padding: 10px;
}
.flex div{
    width: 50%;
    margin: 10px;
    padding: 10px;
}

width:50%,margin:10px,padding:10pxと指定しています。横幅の合計が100%を超えておりfloatなら間違いなく崩れていますが、display:flexなら自動で幅調整し、絶対崩れません

また、tableのtdと違い、marginを設定できます

注意点としてdisplay:flexは横並べする親要素に指定します。

floatは子要素に指定するので異なる点です。

親要素にdisplay:flexを指定し、子要素にfloatを指定した場合、display:flexが優先されます。

古いブラウザではfloatで対応する、というときに使う方法です。
※floatのためにしっかり横幅計算しないと古いブラウザでは崩れかねません。気をつけましょう。

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

↑「副業してもう少し稼ぎたい!」というかたのために副業の方法も解説しています。

2.横並びした要素の間隔を均等にしたい

display:flexはきれいに並べることに長けています。

子要素の横の位置指定にはjustify-contentプロパティを使います。
justify-contentはdisplay:flexと同じ要素に指定します。要は横並びする親要素に指定します。

justify-content(横揃え)一覧

両端揃え

justify-content: space-between

両端は端っこにピッタリくっつき、両端以外の要素は等間隔となります。

1
2
3

両端も空白あり

justify-content:space-around

要素1つ1つにmargin:autoがかかっているイメージです。

1
2
3

中央寄せ

justify-content: center;

すべての要素が真ん中に集まります。

1
2
3

右寄せ

justify-content: flex-end

float:rightと違いhtmlソース順に寄ります

1
2
3

左寄せ:初期値

justify-content:flex-start

初期状態です。

1
2
3

応用:中の要素も一方に寄せる

justify-content: space-betweenを指定します。

中央にある要素にmargin:autoを指定します

右寄せ:margin-left:auto

左寄せ:margin-right:auto

1
margin-left:auto
3
1
margin-right:auto
3
1
margin-right:auto
margin-left:auto
4
1
margin-left:auto
margin-right:auto
4

3. 右から順に並べたい

floatだとfloat:rightで右から順に並べることができますね。
もちろんdisplay:flexでも可能です。なんなら下から順に並べることも可能です。

flex-directionプロパティを使います。これはdisplay:flexと同じ要素に指定します。要は横並び(縦並び)する親要素に指定します。

flex-direction(配置方向指定)一覧

左から右へ:初期値

flex-direction:row

1
2
3

右から左へ

flex-direction:row-reverse

1
2
3

上から下へ

flex-direction:column

1
2
3

下から上へ

flex-direction:column-reverse

1
2
3

4. 2つ以上の要素の高さをそろえたい

display:flexなら左右の要素の高さが自動でそろいます。tableのイメージですね。

この例ではブラウザの幅を狭めると中の文章が自動で改行され、高さが変わり、右の要素もそれに合わせて高さが変わります。

5. 横幅に応じて折り返したい

display:flexは改行させることもできます。
改行するだけならfloatでもできます。ただし、floatと違い、高さが行ごとにそろい、絶対崩れないのです。

まず、display:flexを折り返すにはflex-wrap: wrapを指定します。flex-wrap: wrapはdisplay:flexと同じ要素に指定します。要は横並びする親要素に指定します。

以下が例ですが、flexとfloatを載せるのでいかに違うか比べてみてください。
なお、ブラウザの幅を狭くすると折り返し箇所が変わります。

display: flexの場合

(1)テキストテキストテキストテキスト
(2)テキストテキストテキスト
(3)テキストテキスト
(4)テキストテキストテキストテキストテキスト
(5)テキストテキストテキストテキスト
(6)テキスト
(7)テキスト
(8)テキストテキストテキストテキストテキストテキストテキストテキスト

floatの場合

(1)テキストテキストテキストテキスト
(2)テキストテキストテキスト
(3)テキストテキスト
(4)テキストテキストテキストテキストテキスト
(5)テキストテキストテキストテキスト
(6)テキスト
(7)テキスト
(8)テキストテキストテキストテキストテキストテキストテキストテキスト

floatの場合は崩れまくりですが、display:flexだときれいにそろってますね。
しかもその行単位の最大の高さに自動で合わせるため、無駄な空白がないのも美しいです。

6. 子要素を親要素と同じ高さにしたい

display:flexを使うと高さを親要素とそろえることができます。
特に高さがフレキシブルに変わる場合に便利です。

下記のようにflexで横並べした左右同じ高さの青い親ボックスがあります。右の青い親ボックスの高さは白い子ボックスのテキスト量に応じて変わっています。左の白い子ボックスの高さも青い親ボックスにそろえましょう。

親の高さに合わせたい

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

青い親ボックスにdisplay:flexとalign-items:stretchを指定します。

親の高さに合った

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

html

<div class="flex5">
    <div><p>親の高さに合った</p></div>
    <div><p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div>
</div>

CSS

.flex5{
    display: flex;
}
.flex5 div{
    display: flex;
    align-items: stretch;/*コレ*/
}
.flex5 div p{
    width: 100%;
}

align-itemsは子要素の縦の位置を調整するCSSです。

align-itemsはdisplay:flexと同じ要素に指定します。要は横並びする親要素に指定します。

align-items(縦位置)一覧

align-items:
baseline
align-items:
flex-start
align-items:
center
align-items:
flex-end
align-items:
stretch

1

2

3

1

2

3

1

2

3

1

2

3

1

2

3

文字位置が基準
上寄せ
中央寄せ
下寄せ
高さそろえる
(初期値)

7. 上下左右中央寄せしたい

先に説明した縦と横の中央寄せを指定することで実現可能です。

display: flex;
justify-content: center;/*横の中央寄せ*/
align-items: center;/*縦の中央寄せ*/

↑最低限必要なCSSはたった3つです。

文字も上下中央寄せ可能

html

<div class="flex8">
    <div></div>
</div>
<div class="flex8">
    文字も上下中央寄せ可能
</div>

CSS

.flex8{
    display: flex;
    justify-content: center;/*コレ*/
    align-items: center;/*コレ*/
    background: #9dedde;
    height: 100px;
    margin: 10px 0;
}
.flex8 div{
    background: #6278d3;
    height: 50px;
    width: 50px;
}

8. スマホ(PC)ではhtmlの順番を入れ替えたい

スマホ版とPC版を同じhtmlで変化できるレスポンシブデザインが主流です。しかし、スマホ版とPC版では目的や画面サイズが異なるため配置を変更させたいことも多々あるハズです。

display:noneでいちいち消すのもナンセンス!

display:flexのorderプロパティなら順番の入れ替えも可能です。

下記は例です。ブラウザの幅を変えるとスマホ幅⇔パソコン幅の切り替わり時に順番が入れ替わります。

1 order:2
2 order:-1
3 order:1
4 order:未指定(初期値0)
5 order:1
6 order:-1
7 order:-2

order特徴

  • htmlの順番を見た目上入れ替えることができる。
  • display:flexの子要素に指定する。
  • +の整数、0、-の整数が指定可能(小数点は不可)
  • 指定しないと0扱い(初期値0)
  • 値が同じときはhtml順に表示

9. テキストが1行の時は中央寄せに、2行以上になったら左寄せにしたい

テキストをjustify-content: centerで揃えます。

テキスト
テキストテキストテキストテキスト

html

<div class="flex11">
    <div>テキスト</div>
    <div>テキストテキストテキストテキスト</div>
</div>

CSS

.flex11{
    display: flex;
    background: #9dedde;
    margin: 10px 0;
    justify-content: center;
}
.flex11 div{
    background: #6278d3;
    width: 200px;
    margin: 5px;
    padding: 0 5px;
    color: #FFF;
    display: flex;
    justify-content: center;
}

上記は左右どちらもdisplay: flex;justify-content: center;を指定しています。

display:flexがうまくいかなきとき

display:flexは少しクセのあるCSSです。思った通りのデザインにならないときは下記記事を参考にしてください。

まとめ

  1. 崩さずに横並びさせたい。tableやfloatではうまくいかない。
    →display:flex
  2. 横並びした要素の間隔を均等にしたい
    →justify-content
  3. 右から順に並べたい
    →flex-direction: row-reverse
  4. 2つ以上の要素の高さをそろえたい
    →display:flex
  5. 横幅に応じて折り返したい
    →flex-wrap: wrap
  6. 子要素を親要素と同じ高さにしたい
    →align-items:stretch
  7. 上下左右中央寄せしたい
    →justify-content: center;align-items: center;
  8. スマホ(PC)ではhtmlの順番を入れ替えたい
    →order
  9. テキストが1行の時は中央寄せに、2行以上になったら左寄せにしたい
    →justify-content: center

上記はすべてdisplay:flexで解決できます。併せて関連するプロパティを紹介しました。display:flexに関するプロパティは実はまだあるのですが、ここで紹介したプロパティで概ね事足ります。

以上、CSS display:flexで解決できること9選でした。

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。

CSSやhtmlをマンガで学ぶ