CSS display:flexで解決できること9選!
display:flexは便利らしいがどんなときに使えるのか。
横並べを中心に、いろいろなことができるので覚えておきましょう。
以下のようなときはCSS display:flexで解決可能です！
目次
1.崩さずに横並びさせたい。tableやfloatではうまくいかない。
floatはちょっとしたことで崩れますし、tableは幅が勝手に変わったり、htmlのソースが多く面倒です。
display:flexなら絶対崩さずに横並べができます。
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
両端は端っこにピッタリくっつき、両端以外の要素は等間隔となります。
両端も空白あり
justify-content:space-around
要素1つ1つにmargin:autoがかかっているイメージです。
中央寄せ
justify-content: center;
すべての要素が真ん中に集まります。
右寄せ
justify-content: flex-end
float:rightと違いhtmlソース順に寄ります
左寄せ：初期値
justify-content:flex-start
初期状態です。
応用:中の要素も一方に寄せる
justify-content: space-betweenを指定します。
中央にある要素にmargin:autoを指定します
右寄せ：margin-left:auto
左寄せ：margin-right:auto
3. 右から順に並べたい
floatだとfloat:rightで右から順に並べることができますね。
もちろんdisplay:flexでも可能です。なんなら下から順に並べることも可能です。
flex-directionプロパティを使います。これはdisplay:flexと同じ要素に指定します。要は横並び（縦並び）する親要素に指定します。
flex-direction（配置方向指定）一覧
左から右へ：初期値
flex-direction:row
右から左へ
flex-direction:row-reverse
上から下へ
flex-direction:column
下から上へ
flex-direction:column-reverse
4. 2つ以上の要素の高さをそろえたい
display:flexなら左右の要素の高さが自動でそろいます。tableのイメージですね。
5. 横幅に応じて折り返したい
display:flexは改行させることもできます。
改行するだけならfloatでもできます。ただし、floatと違い、高さが行ごとにそろい、絶対崩れないのです。
まず、display:flexを折り返すにはflex-wrap: wrapを指定します。flex-wrap: wrapはdisplay:flexと同じ要素に指定します。要は横並びする親要素に指定します。
以下が例ですが、flexとfloatを載せるのでいかに違うか比べてみてください。
なお、ブラウザの幅を狭くすると折り返し箇所が変わります。
display: flexの場合
floatの場合
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（縦位置）一覧
baseline
flex-start
center
flex-end
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プロパティなら順番の入れ替えも可能です。
下記は例です。ブラウザの幅を変えるとスマホ幅⇔パソコン幅の切り替わり時に順番が入れ替わります。
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です。思った通りのデザインにならないときは下記記事を参考にしてください。
まとめ
- 崩さずに横並びさせたい。tableやfloatではうまくいかない。
→display:flex - 横並びした要素の間隔を均等にしたい
→justify-content - 右から順に並べたい
→flex-direction: row-reverse - 2つ以上の要素の高さをそろえたい
→display:flex - 横幅に応じて折り返したい
→flex-wrap: wrap - 子要素を親要素と同じ高さにしたい
→align-items:stretch - 上下左右中央寄せしたい
→justify-content: center;align-items: center; - スマホ（PC）ではhtmlの順番を入れ替えたい
→order - テキストが1行の時は中央寄せに、2行以上になったら左寄せにしたい
→justify-content: center
上記はすべてdisplay:flexで解決できます。併せて関連するプロパティを紹介しました。display:flexに関するプロパティは実はまだあるのですが、ここで紹介したプロパティで概ね事足ります。
以上、CSS display:flexで解決できること9選でした。
「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。
