0%

Programmingプログラミングナレッジ

Posted:2018.01.16

CSSのFlexboxレイアウトをマスターするためのまとめ(Flexコンテナー編)

サイトのレイアウトにおいて最近はFlexboxを採用するケースがほとんどなのではないでしょうか。とは言っても完璧に理解しているという方はどれくらいいるのでしょうか。様々なバリエーションがあり便利なFlexboxを今回はじっくりとまとめていきます。

 

数がとても多いので全2回に分けてまとめていきたいと思います。まず今回はFlexboxレイアウトについての基本的な知識と、親要素のFlexコンテナーに指定するプロパティになります。

 

基本:Flexboxを構成する要素について

まずは基本的なことになりますが、FlexboxはFlexコンテナーという親要素とFlexアイテムという子要素で構成されています。つまり下記のようなFlexコンテナーとFlexアイテムの親子関係が成り立ちます。

<div class="flex-container>
   <div class="flex-item"></div>
   <div class="flex-item"></div>
   <div class="flex-item"></div>
</div>

 

この親要素である「.flex-container」に対して「display: flex;」を指定することで、Flexboxレイアウトが適用され、子要素の「.flex-item」が横に並びフレキシブルに対応することが可能になります。SafariやiOS用に「-webkit-」のベンダープレフィックスをつけておきます。基本的にはブロックレベル要素として扱うことが多いですが、インライン要素に適用させたい場合は「display: inline-flex;」を指定させます。

.flex-container {
  display: flex;
  display: -webkit-flex;
}

// Flexコンテナーをインライン要素としたい場合
.flex-container {
  display: inline-flex;
  display: -webkit-inline-flex;
}

 

これで要素をFlexboxレイアウトとして扱えるようになりました。ただこれだけだと横に並んだだけになります。以下で説明する様々なプロパティでいろんな指定を行うことができるのがFlexbox最大の強みです。

 

実践:親要素の「Flexコンテナー」の振る舞いを指定する

まずは親要素である「Flexコンテナー」に対して様々な指定を行ってきたいと思います。

 

1. 親要素内の並びと配置方向を指定する「flex-direction」

親要素に含まれる子要素がどのような順番で並びどの場所から配置されるかと指定できます。(プレフィックスを付ける場合は「-webkit-flex-direction」となります)

row 左端から右端へと行内へ水平に子要素が並んで配置されます。
row-reverse 右端から左端へと行内へ水平に子要素が並んで配置されます。
column 上端から下端へと列内へ垂直に子要素が並んで配置されます。
column-reverse 下端から上端へと列内へ垂直に子要素が並んで配置されます。

 

 

2. 親要素内の並びの折り返しを指定する「flex-wrap」

子要素の配置折り返しを指定できます。子要素を横一行に収めたいか、幅を保持して折り返したいかで使い分けます。(プレフィックスを付ける場合は「-webkit-flex-wrap」となります)

nowrap 子要素は折り返しされず必ず一つの横行内に収まります。
wrap 子要素は行内のサイズを超えると折り返され複数行に渡って配置されます。
wrap-reverse 子要素は行内のサイズを超えると折り返され複数行に渡って配置された上で、下段行から並び変わります。

 

 

3. 親要素内の水平方向への整列を指定する「justify-content」

子要素を水平方向に揃えたい場合に指定します。flex-directionがcolumnなどの場合は垂直方向になり-reverseの指定がついているとflex-startとflex-endが逆になります。(プレフィックスを付ける場合は「-webkit-justify-content」となります)

flex-start 親要素の左端に寄せて子要素が配置されます。
center 親要素の水平方向中央に寄せて子要素が配置されます。
flex-end 親要素の右端に寄せて子要素が配置されます。
space-between 親要素の左右両端に子要素を揃えた上で、等間隔に配置されます。
space-around 親要素内で子要素が全て同じ間隔で配置されます。

 

 

4. 親要素内で単一行での垂直方向への整列を指定する「align-items」

子要素を垂直方向に揃えたい場合に指定します。単一行が対象となるのでflex-wrapでnowrapを指定する必要があります。(プレフィックスを付ける場合は「-webkit-align-items」となります)

stretch 親要素の高さにあわせて子要素の高さが引き延ばされるように配置されます。
flex-start 親要素の上端に寄せて子要素が配置されます。
center 親要素の垂直方向中央に寄せて子要素が配置されます。
flex-end 親要素の下端に寄せて子要素が配置されます。
baseline 親要素のベースラインに合わせて子要素が配置されます。

 

 

5. 親要素内で複数行での垂直方向への整列を指定する「align-content」

複数行にわたる子要素を垂直方向に揃えたい場合に指定します。複数行が対象となるのでflex-wrapでwrapを指定する必要があります。(プレフィックスを付ける場合は「-webkit-align-content」となります)

stretch 親要素の高さを占めるように均等に広がって配置されます。
余白がある場合は均等にそれぞれの子要素の後ろにつきます。
flex-start 親要素の上端に集められて子要素が配置されます。
center 親要素の垂直方向中央に集められて子要素が配置されます。
flex-end 親要素の下端に集められて子要素が配置されます。
space-between 親要素の上端と下端に揃えられて、残りの行が等間隔に配置されます。
space-around 親要素内でそれぞれの行が等間隔に配置されます。

 

 

おまけ:親要素の「Flexコンテナー」で使えるショートハンド

「flex-direction」と「flex-wrap」をまとめて指定できる「flex-flow」

親要素内の並びと配置、そして折り返し有無の指定をまとめてできます。flex-directionからflex-wrapの順に指定します。

.flex-container { 
   flex-flow: row-reverse nowrap; 
   -webkit-flex-flow: row-reverse nowrap; 
}

 


 

いかがでしょうか、今回はFlexboxレイアウトにおける親要素のFlexコンテナーに指定するプロパティをまとめました。引き続き次回記事「CSSのFlexboxレイアウトをマスターするためのまとめ(Flexアイテム編)」で親要素のFlexアイテムに指定するプロパティをまとめていきたいと思います。今回のサンプルはこちらにまとめていますのでご参考に!

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】