もうfloatは使わない?新定番Flexboxの使い方を徹底解説!

CSS

もうfloatは使わない?新定番Flexboxの使い方を徹底解説!

2018年11月30日 8:00 

もうfloatは使わない?新定番Flexboxの使い方を徹底解説!

おはようございます!社員Aです👩

横並びレイアウトで定番だったcssのfloatから、今はFlexboxが主流になりつつあるので今回はFlexboxの使い方を徹底解説します。



 

Flexboxとは?

そもそもFlexboxとは何かという話なのですが、FlexboxとはFlexible Box Layout Moduleのことで、フレキシブルで簡単にレイアウトが組めるCSS3のプロパティです。

いままでは、「float」「inline-block」などで横並びレイアウトを実装するのが主流でしたが、cleafixでの解除や縦方向の中央揃えなどが面倒でした。

そこで、もっと柔軟で簡単な手法が「Flexbox」になります。

 

対応ブラウザ

引用:https://caniuse.com/#search=flexbox

2018年11月現在の結果ですが、ほぼ全てのブラウザで対応しています。

今までは対応していないブラウザもあり、Flexboxの使用を躊躇している方も多かったと思いますが、これで気軽に使えそうです。

 

Flexboxを使うメリット

今までFloatやinline-blockで横並びしていた時には実現できなかった、Flexboxならではの特徴があります。

  1. 高さを自動的に調整してくれる
  2. 自由に表示順序を変えられる
  3. 余白の指定がカンタンにできる

このため、Floatやinline-blockを使うよりもレスポンシブ対応も容易になります。

 



Flexboxの使い方(親要素編)

Flexboxは親要素と子要素に指定できるものがあります。

ここからは、親要素に指定できるものをご紹介します。

 

1.要素を横並びにする

まずは、Flexboxの基本でもある要素を横並びにする方法です。

Flexboxを使用する際は、横並びにしたい要素と、それを囲う要素が必要になります。

上記のソース例で言うと、横並びにしたい要素divを親要素「flex_wrap」で囲みます。

そして、CSSで下記の指定をするだけです。

親要素に対して、display:flexを使うことで子要素を横並びにすることができます。

 

 

2.縦の揃えを変更できる「align-items」

align-itemsプロパティは、コンテナ内のアイテムの縦方向(交差軸方向)のデフォルト揃え位置を指定する際に使用します。

◆HTML

 

◆CSS

 

◆指定できる値

説明
stretch 一番大きい高さに合わせて、要素を広げて配置します。
center センターに配置
start 始端に配置
end 終端に配置
flex-start フレックスコンテナ内の始端に配置
flex-end フレックスコンテナ内の終端に配置
baseline ベースラインに揃える

 



3.横の揃えを変更できる「justify-content」

justify-contentプロパティは、コンテナ内全体の横方向(主軸方向)の揃え位置を指定する際に使用します。

align-contentプロパティの横方向版ですね。

◆HTML

 

◆CSS

 

◆指定できる値

説明
flex-start 行頭寄せ、通常は左揃え(初期値)
flex-end 行末寄せ、通常は右揃え
center センター揃え
space-between アイテムの間にスペースを均等に割り付け
space-around アイテムの両端にスペースを均等に割り付け

 

 

4.縦の揃えを変更できる「flex-direction

flex-directionプロパティは、フレックスコンテナ内のアイテムの配置方向を指定する際に使用します。

具体的には、フレックスコンテナの主軸方向を設定することで、フレックスアイテムがレイアウトされる方向を決定します。

◆HTML

 

◆CSS

 

◆指定できる値

説明
row フレックスコンテナの主軸は左から右になります。正確に言うと現在のインライン軸の方向と同じになります。
row-reverse フレックスコンテナの主軸方向が row の逆になります
column フレックスコンテナの主軸は上から下になります。正確に言うと現在のブロック軸の方向と同じになります。
column-reverse フレックスコンテナの主軸方向が column の逆になります

 

 

5.折り返しを変更できる「flex-wrap

flex-wrapプロパティは、フレックスコンテナ内のアイテムの折り返し方法を指定する際に使用します。

フレックスアイテムの折り返しの有無、折り返す場合の折り返し行の積み上げ方向を指定できます。

◆HTML

 

◆CSS

 

◆指定できる値

説明
nowrap 折り返しなし(初期値)
wrap 折り返す
wrap-reverse 逆方向に折り返す。積み上げの方向が逆になって下から上に積み上がる

 

 

6.複数行の揃えを変更「align-content

align-contentプロパティは、コンテナ内全体の縦方向(交差軸方向)の揃え位置を指定する際に使用します。

◆HTML

 

◆CSS

 

◆指定できる値

説明
flex-start 開始位置揃え、通常は上端揃え
flex-end 終了位置揃え、通常は下端揃え
center センター揃え
space-between 各ラインがフレックスコンテナ内に均等に配分され、各ラインの間にスペースを均等に割り付け
space-around 各ラインがフレックスコンテナ内に均等に配分され、各ラインの両端にスペースを均等に割り付け
stretch フレックスアイテムが伸ばされて揃えられる(初期値)

 



Flexboxの使い方(子要素編)

Flexboxは親要素と子要素に指定できるものがあります。

ここからは、子要素に指定できるものをご紹介します。

 

1.要素の並び順を調整できる「order」

orderプロパティは、フレックスコンテナ内のアイテムの表示順序を指定する際に使用します。

フレックスアイテムは、デフォルトではソースに記述されている順序と同じ順序で表示されます。

orderプロパティを使用するとこの表示順序を変更できます。

◆HTML

 

◆CSS

orderで指定した数字の小さい順に表示されます。

 

 

2.要素の幅を広げられる「flex-grow」

flex-growプロパティは、フレックスコンテナ内のアイテムの伸び方の比率を指定する際に使用します。

flex-growプロパティでは、各フレックスアイテムの伸び方の比率を、正の数値で相対的に指定します。 flex-growプロパティの値に、負の数値は指定できません。

◆HTML

 

◆CSS

 



3.要素の幅を縮ませられる「flex-shrink」

flex-shrinkプロパティは、フレックスコンテナ内のアイテムの縮み方の比率を指定する際に使用します。

指定した数値が大きいほど幅が大きくなります。

◆HTML

 

◆CSS

 

 

4.要素の大きさを単位指定できる「flex-basis」

flex-basisプロパティは、フレックスコンテナ内のアイテムの基本幅を指定する際に使用します。

必ず指定した幅で表示されるわけではなく、他の指定との兼ね合いでフレックスコンテナ内におさまるように自動調整されます。

◆HTML

 

◆CSS

 

 

5.要素の大きさを調整を一括指定できる「flex」

flexプロパティは、フレックスコンテナ内のアイテムの幅についてまとめて指定する際に使用します。

flex-growプロパティ・ flex-shrinkプロパティ・ flex-basisプロパティ の値を、flexプロパティ一つでまとめて指定できるので便利です。

◆CSS

 



6.縦の揃えを子要素ごとに変更できる「align-self」

align-selfプロパティは、コンテナ内の個別アイテムの縦方向(交差軸方向)の揃え位置を指定する際に使用します。

アイテムの縦方向のマージンのいずれかがautoに指定されている場合、align-selfプロパティの指定は無効となります。

◆HTML

 

◆CSS

 

◆指定できる値

説明
auto 親ボックスのalign-itemプロパティの値に合わせる(初期値)
flex-start 開始位置揃え、通常は上端揃え
flex-end 終了位置揃え、通常は下端揃え
center センター揃え
baseline ベースライン揃え
stretch フレックスアイテムが伸ばされて揃えられる

 

まとめ

Flexboxは手軽に横並びが実装できるCSSとして主流になっています。

カスタマイズ性も高いので、各機能を覚えるまでが大変ですがこのブログをブクマしていただいて、使う時に見ていただけたら嬉しいです!

スポンサーリンク

この記事を書いた人

社員A

社員A

フロントエンドエンジニア・デザイナーの社員Aです。 多分一番更新頻度が多いかと思います。このブログのテーマも作成しました。ブログの執筆を通じて、やっと日本語Lv.20くらいになれた気がします。 家ではデグーとチンチラという小動物を飼っていて、かなり溺愛しています…!小動物が好きな皆さん、小動物トークしましょう!