【フレックスボックス】 display:flexを使って横並びにする方法を解説

CSS

【フレックスボックス】CSS display:flexの使い方を解説

投稿日:2019年10月18日 更新日:

フレックスボックス(フレキシブルボックス)は、CSSの新しいレイアウト技法で、HTMLブロックを横並びにすることができます。
 

フレックスボックスは、display:flexで実現でき、従来のfloatよりも柔軟なレイアウトを組むことができます。
 


 


 
 

フレックスボックス flexの使い方

フレックスボックス(フレキシブルボックス)は、CSSの新しいレイアウト技法で、HTMLブロックを横並びにすることができます。
 

display:flexを設定することで、cssのflexbox(フレックスボックス)と呼ばれるレイアウトモードを使用することができます。
 

フレックスボックスの説明
 

シンプルな使い方は下記の通り。通常縦並びになる要素ですが、親要素をdisplay:flexを設定して(フレックスコンテナにして)、子要素を横並びにすることができます。


 

フレックスコンテナに設定できる項目は以下の通りです。

項目意味
display:flex【最重要(必須)】 フレックスコンテナの指定
flex-direction【重要】 子要素(フレックスアイテム)をどの方向に並べていくかを指定するプロパティ
flex-wrap【重要】 子要素(フレックスアイテム)を一行に並べるか、複数行に並べるかを指定するプロパティ
justify-contentflex-directionで並べる際に、(主軸に対して)子要素同士をどのような間隔で並べるかを指定するプロパティ
align-itemsflex-directionで並べる際に、交差軸に対して子要素同士をどのような間隔で並べるかを指定するプロパティ

 

flex系のプロパティはたくさんありますが、特によく使う【重要】と記載しているプロパティをまず覚えておきましょう。

 

フレックスアイテム(子要素)には下記のプロパティが設定できます。子要素をどのようなレイアウトにするか指定できるプロパティですが、必要ない場合は設定しなくても構いません。

項目意味
orderフレックスアイテムの並べる順番をどうするか指定するプロパティ
flex-growフレックスアイテムを他の要素と比べてどのくらい伸ばすか指定するプロパティ
flex-shrinkフレックスアイテムを他の要素と比べてどのくらい縮めるか指定するプロパティ
flex-basisflex-basisはwidthのように幅を指定するプロパティ。flex-basisとwidthの両方が設定されている場合は、flex-basisが優先されます。初期値はauto。
flexflex-grow、flex-shrink、flex-basisを1つにまとめて記載できるプロパティ

 

フレックスコンテナ(親要素)に設定できるflex系プロパティ

まずは、フレックスコンテナ(親要素)に設定できるflex系のプロパティを説明していきます。
 

display:flexを適用
 

項目意味
display:flex【最重要】フレックスコンテナの指定(必須)
flex-direction【重要】子要素(フレックスアイテム)をどの方向に並べていくかを指定するプロパティ
flex-wrap【重要】子要素(フレックスアイテム)を一行に並べるか、複数行に並べるかを指定するプロパティ
justify-contentflex-directionで並べる際に、主軸に対して子要素同士をどのような間隔で並べるかを指定するプロパティ
align-itemsflex-directionで並べる際に、交差軸に対して子要素同士をどのような間隔で並べるかを指定するプロパティ

 

フレックスボックスの基本設定 display:flex

フレックスボックスを利用するためには、flexboxを利用する親要素に、display:flexを追加します。これにより、親要素がflexコンテナとなり、子要素がflexアイテムとなります。
 

なお、インライン要素でフレックスボックスを利用する場合は、display:inline-flexを指定します。
 

■表示例 親要素にdisplay:flexを指定


 

■上記のソースコード

 

(補足)Webブラウザの互換性について

フレックスボックスは比較的新しくできたCSSのプロパティのため、古いブラウザはフレックスボックスに対応していなかったり、ベンタープレフィックス(-webkit-xxx など)を付けないと動作しない場合があります。
 

そのためdisplay:flexは互換性を考慮して下記のように併記することも多いです(その他のフレックスボックス関連プロパティも同様)

 

display:flexのブラウザサポート状況
https://caniuse.com/より引用 2019年10月時点

 

ここでは、簡単のため古いWebブラウザの互換性などは考慮しない記述で説明していきます。

 
 

フレックスアイテムを一行に収めるか複数行にするか flex-wrap

flex-wrapプロパティは、フレックスアイテムを一行(一列)に収めるか、複数行を許可するかを指定するプロパティです。
 

floatなどのプロパティーと違いとして、フレックスアイテムが親要素の幅を超えても、超えた分が下の行に落ちず必ず一行内に収まるようになっています(縮まったりはみ出したりします。)。親要素の幅を超える時に複数行にするかしないかの設定がflex-wrapです。
 

項目意味
flex-wrap:nowrap(初期値)フレックスアイテムが一行に収まらない時でも1行に収める。
※収まらない場合は、フレックスアイテムにwidthを設定しても効かなかったりはみ出したりする
flex-wrap:wrapフレックスアイテムが一行に収まらない時に複数行にする
flex-wrap:wrap-reverseフレックスアイテムが一行に収まらない時に複数行にする(順番を逆にする)

 

■flex-wrap:wrapを指定していない場合、子要素にwidth:50%を設定しても縮んで一行に収まります。
flex-wrap:nowrap
 

■flex-wrap:wrapを指定すると50%が効いて複数行になります。
flex-wrap:wrap
 

■上記のソースコード

 

■ただし、フレックスアイテムの合計の横幅が100%に収まる場合はwidthが効きます。
flex-item widthの設定
 

■Webブラウザのサポート状況
flex-wrapのブラウザサポート状況
https://caniuse.com/より引用 2019年10月時点

 
 

フレックスアイテムの方向設定 flex-direction

flex-directionプロパティは、フレックスコンテナの方向(主軸)を指定するプロパティです。フレックスアイテム(子要素)はこの主軸の方向に沿って配置されます。
 

■flex:direction 主軸の向きを決定する(横方向)
flex-direction:row、row-reverse 水平方向
 

■flex:direction:column (column-reverse)の場合は垂直方向に並びます。
flex
 

初期値は、flex-direction:rowです。子要素が左から右へ順番に配置されます。初期値なので省略することが多いです。
display:flexを適用
 

項目意味
flex-direction:row (初期値)左から右に配置(初期値)
flex-direction:row-reverse右から左に配置
flex-direction:column上から右に配置
flex-direction:column-reverse下から上に配置

 

■表示例 flex-direction:row-revese(右から左へ)
flex-direction:row-reverse
 

■上記(flex-direction:row-revese)のソースコード

 

■flex-direction:column(上から下へ)
flex-direction:column
 

■flex-direction:column-reverse(下から上へ)
flex-direction:column-reverse
 
 

■Webブラウザのサポート状況
flex-directionのブラウザサポート状況
https://caniuse.com/より引用 2019年10月時点

 
 

フレックスアイテムの配置設定 justify-content

justify-contentというプロパティを使用すると、flex-directionで指定したフレックスコンテナの方向に沿って、フレックスアイテムをどのように配置するかを設定できます。
 

項目内容
justify-content:flex-start主軸の始点に配置します(デフォルト)
justify-content:flex-end主軸の終点に配置します
justify-content:center主軸の中央に配置します
justify-content:space-between両端から均等に配置します
justify-content:space-around主軸に対し均等間隔に配置します

 
 

以下は、主軸方向がrow(デフォルト)の場合の表示例です。
■justify-content:flex-start(初期値)
display:flexを適用
 

■justify-content:flex-end
justify-content:flex-end
 

■justify-content:center
justify-content:center

■justify-content:space-between
justify-content:space-between
 

■justify-content:space-around
justify-content:space-around
 

なお、flex-direction:columnの場合は、垂直方向の配置を制御することになります。


 

■Webブラウザのサポート状況
justify-contentのブラウザサポート状況
https://caniuse.com/より引用 2019年10月時点

 
 

フレックスアイテムの交差軸の配置設定 align-items

flexboxは2つの軸を持っています。flex-directionで設定した向きが主軸で、主軸に対して垂直な軸を交差軸といいます。
 

align-itemsプロパティを利用すると、flexコンテナの交差軸に沿って、flexアイテムをどのように配置するかを設定できます。
 

以下は、主軸が水平の場合の、主軸と交差軸です。
Bootstrap4 flexbox flex-rowの場合 主軸と交差軸
 

align-itemに設定できる項目は以下の通り。

項目意味
align-items:stretch交差軸の始点から終点まで伸縮する(初期値) ※heightを設定していない場合
align-items:flex-start交差軸の始点に配置する
align-items:flex-end交差軸の終点に配置する
align-items:flex-center交差軸の中央に配置する
align-items:space-baseline交差軸のベースラインに配置する

 
 

■主軸が水平方向(flex-direction:row)の場合、aligh-itemsは、垂直方向の交差軸に対して配置を制御します。


 

なお、主軸が垂直方向(flex-direction:column)の場合、flex-alignsは水平方向の交差軸に対して配置を制御します。
Bootstrap 4 flexbox flex-rowの場合 主軸と交差軸
 

■Webブラウザのサポート状況
align-itemsのブラウザサポート状況
https://caniuse.com/より引用 2019年10月時点

 
 

フレックスアイテム(子要素)に設定できるflex系プロパティ

ここからは、フレックスアイテム(子要素)に設定できるflex系プロパティをご紹介していきます。
 

項目意味
orderフレックスアイテムの並べる順番をどうするか指定するプロパティ
flex-growフレックスアイテムを他の要素と比べてどのくらい伸ばすか指定するプロパティ
flex-shrinkフレックスアイテムを他の要素と比べてどのくらい縮めるか指定するプロパティ
flex-basisflex-basisはwidthのように幅を指定するプロパティ。flex-basisとwidthの両方が設定されている場合は、flex-basisが優先されます。初期値はauto。
align-selfflex-directionで並べる際に、交差軸に対して子要素同士をどのような間隔で並べるかを指定するプロパティ

 

順番を制御 Order

orderプロパティを利用すると、フレックスアイテム(子要素)の順番を制御することができます。
 

■表示例
flex orderの例
 

■上記のソースコード

 

■Webブラウザのサポート状況
orderのブラウザサポート状況
https://caniuse.com/より引用 2019年10月時点

 

フレックスアイテムの幅の指定flex-basis

フレックスアイテムの幅の指定をするプロパティがflex-basisです。
 

flex-basis初期値はautoです。flex-basisは、widthと同じ意味でflex-basisとwidthの両方が設定されている場合は、flex-basisが優先されます。
 

■flex-basisの表示例

 

■Webブラウザのサポート状況
flex-basisのブラウザサポート状況
https://caniuse.com/より引用 2019年10月時点

 
 

フレックスアイテムをどのくらい伸ばすか flex-grow

フレックスアイテムを他の要素と比べてどのくらい伸ばすか指定できるプロパティがflex-growです。
 

■flex:growのサンプル例
flex:grow
 

■上記のソースコード

 

■Webブラウザのサポート状況
flex-growのブラウザサポート状況
https://caniuse.com/より引用 2019年10月時点

 
 

フレックスアイテムをどのくらい縮めるか flex-shrink

フレックスアイテムを他の要素と比べてどのくらい縮めるか指定できるプロパティがflex-growです。数字を設定でき、初期値(伸縮なし)は「0」です。
 

flex-shrink
 

■Webブラウザのサポート状況
flex-shrinkのブラウザサポート状況
https://caniuse.com/より引用 2019年10月時点

 
 

まとめ

まとめです。今回は、フレックスボックス(フレキシブルボックス)で要素のレイアウトを調整する方法を紹介しました。
 


 

フレックスボックスは、display:flexで実現でき従来のfloatよりも柔軟なレイアウトを組むことができます。
 


弊社は、自分でホームページを作ることを推奨しています。「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら


 

今回は、以上になります。最後までご覧いただきありがとうございました。
 

『自分で作る選択を』
自分でホームページ作成・Web集客したいホームページ作成スクール・教室

自分でホームページ作成・Web集客したいホームページ作成スクール・教室 WEBST8

おすすめ記事3選

【2019年度】WordPressブログアフィリエイトにおすすめのテーマ5選

ブログアフィリエイトを本格的に始めるなら、広告の埋め込み機能をはじめ記事装飾・デザイン機能が圧倒的に豊富なブログに特化した有料テーマがおすすめです。 当ブログで利用している「AFFINGER5」や関連サイトで利用している「賢威」をはじめ、アフィリエイトでおすすめ・実績のあるテーマを5選ご紹介していきます。

【初心者向け】WordPressを使ったアフィリエイトの始め方を徹底解説

これから初めてWordPressでアフィリエイトを始めようと思った時に、まず何から手をつけたら良いかわからないという方が多いのではないでしょうか。 本記事では、WordPressでアフィリエイトを始めたい初心者を対象にアフィリエイトの始め方をご紹介していきます。

【2019年版WordPress(ワードプレス)の使い方総まとめ】

本記事ではWordPress(ワードプレス)を使ってホームページまたはブログサイトを作りたい初心者の方向けに、WordPressの導入から使い方まで、総まとめ編として説明していきます。 WordPressの使い方をしっかり勉強したい方はぜひご覧ください。 (※)WordPress5.0から実装された最新のブロックエディター(グーテンベルグエディター)にも対応しています。

-CSS
-,

Copyright© WEBST8 , 2019 All Rights Reserved Powered by AFFINGER5.