0%

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

Posted:2018.01.17

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

レスポンシブ対応のコーディングにとても便利なFlexboxレイアウトですが、前回記事「CSSのFlexboxレイアウトをマスターするためのまとめ(Flexコンテナー編)」に引き続きこちらの記事でもまとめていきたいと思います。今回は子要素であるFlexアイテムについてです。

 

実践:子要素の「Flexアイテム」の振る舞いを指定する

前回のおさらいとなりますが、Flexboxレイアウトは親要素の「Flexコンテナー」と子要素の「Flexアイテム」から構成されます。以下は子要素のFlexアイテムに対して行う指定です。

 

1. 子要素の並び順序を指定する「order」

Flexコンテナー内にあるFlexアイテムを指定した順番に並べることができます。並び順に合わせた数値を指定します。(プレフィックスを付ける場合は「-webkit-order」となります)

.flex-item:first-child {
   order: 3;
   -webkit-order: 3;
}
.flex-item:nth-child(2) {
   order: 1;
   -webkit-order: 1;
}
.flex-item:nth-child(3) {
   order: 2;
   -webkit-order: 2;
}

 

 

2. 親要素内の余白を埋めるために子要素が伸びる割合を指定する「flex-grow」

親要素であるFlexコンテナーに子要素のFlexアイテムが入りますが、その時に余ったスペースを埋めるために子要素のサイズが伸びる割合を指定できます。指定した子要素のみがそれ以外の子要素と比較して余白を埋める分、値に応じてサイズが伸びます。余白が埋まり切らない場合は値に関係なく余白を埋める分だけ伸びます。0の値が初期サイズになります。(プレフィックスを付ける場合は「-webkit-flex-grow」となります)

.flex-item:first-child {
   flex-grow: 0;
   -webkit-flex-grow: 0;
}
.flex-item:nth-child(2) {
   flex-grow: 3;
   -webkit-flex-grow: 3;
}
.flex-item:nth-child(3) {
   flex-grow: 0;
   -webkit-flex-grow: 0;
}

 

 

3. 親要素からはみ出した分を収めるために子要素が縮む割合を指定する「flex-shrink」

今度は親要素であるFlexコンテナーから並んだ子要素のFlexアイテムがはみ出す場合、親要素内に収めるために子要素を縮める割合を指定できます。指定した子要素のみがそれ以外の子要素と比較してはみ出した分を収める分、値に応じてサイズが縮みます。余白が出るところまで縮むことはありません。1の値が初期サイズになります。(プレフィックスを付ける場合は「-webkit-flex-shrink」となります)

.flex-item:first-child {
   flex-shrink: 1;
   -webkit-flex-shrink: 1;
}
.flex-item:nth-child(2) {
   flex-shrink: 2;
   -webkit-flex-shrink: 2;
}
.flex-item:nth-child(3) {
   flex-shrink: 1;
   -webkit-flex-shrink: 1;
}

 

 

4. 子要素の基準となるサイズを指定する「flex-basis」

子要素の基準となるサイズを指定できます。指定した子要素のみが値のサイズを持ち、それ以外の子要素は元のサイズを維持します。pxなどの絶対サイズと%などの相対サイズが使えます。autoの値が元のサイズになります。(プレフィックスを付ける場合は「-webkit-flex-basis」となります)

.flex-item:first-child {
   flex-basis: 15%;
   -webkit-flex-basis: 15%;
}
.flex-item:nth-child(2) {
   flex-basis: 25%;
   -webkit-flex-basis: 25%;
}
.flex-item:nth-child(3) {
   flex-basis: 35%;
   -webkit-flex-basis: 35%;
}

 

 

5. 子要素の垂直方向への整列を指定する「align-self」

子要素を垂直方向に揃えたい場合に指定します。親要素のFlexコンテナーで扱う「align-items」と同じ効果ですが、小要素に対してはこちらの「align-self」で指定した値が優先的に適用されます。(プレフィックスを付ける場合は「-webkit-align-self」となります)

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

 

 

おまけ:子要素の「Flexアイテム」で使えるショートハンド

「flex-grow」と「flex-shrink」と「flex-basis」をまとめて指定できる「flex」

小要素のサイズに関する指定をまとめてできます。flex-grow、flex-shrink、flex-basisの順に指定します。

.flex-container {
   flex: 0 1 300px;
   -webkit-flex: 0 1 300px;
}

 

 

おまけ:Flexboxレイアウトの各種ブラウザ対応状況

とても便利なFlexboxですが、古いブラウザには対応していない、もしくは対応させるための作業が必要なケースもあるようです。

 

まず完全に対応しているのは下記のブラウザになります。

・GoogleChrome
・Firefox
・Safari
・Opera
・Edge
・iOS Safari
・Android Browser
・Internet Explorer 11

この中で、SafariとiOS Safariには「-webkit-」のベンダープレフィックスが必要です。

 

Internet Explorer 10への対応

少し書き方が異なり「-ms-」のベンダープレフィックスが必要なのとdisplayプロパティの値がflexboxになります。

.flex-container {
   display: flex;
   display: -ms-flexbox;  // IE10対応
   flex-direction: row;
   -ms-flex-direction: row;  // IE10対応
}

 

 

Internet Explorer 9への対応

Internet Explorer 9を含むそれ以下については未対応になるのでFlexboxレイアウトとは異なる別の方法を検討する必要がありますが、「flexibility.js」というプラグインを使うことで対応できるとのことです。使う際にはCSS記述時に以下のようにする必要があります。

.flex-container {
   display: flex;
   -js-display: flex;  // IE9以下対応(flexibility.jsの使用)
}

 

また、flexibility.jsの読み込みと下記の実行スクリプトをページ内に設置します。

<!--[if lte IE 9]>
<script src="js/flexibility.js"></script>
<script>
  $(function(){
    flexibility(document.documentElement);
  });
</script>
<![endif]-->

 

 

その他古いブラウザへの対応

今はあまり必要ないかもしれませんが、display: flex;の前身にあたるdisplay: box;というのがありました。各プロパティも少し異なるので注意が必要です。ただし草案的な位置付けなのでバグ対応など局所的にという形で使用するケースがほとんどだと思います。

.flex-container {
   display: flex;
   display: -webkit-box;  // 旧Chrome・Safari・Android対応
   display: -moz-box;  // 旧Firefox対応 
   display: -o-box;  // 旧Opera対応 
   display: -ms-box;  // IE10対応(boxプロパティ) 
}

// 親要素内の整列
.flex-container {
  justify-content: flex-start;
  box-pack: start;  // boxプロパティ
}

// 子要素の並び順指定整列
.flex-item {
   order: 1;
   box-ordinal-group: 1;  // boxプロパティ
}

// 子要素のサイズ伸縮指定
.flex-item {
   flex-grow: 2;
   box-flex: 2.0;  // boxプロパティ
}

 


 

今回は全2回にわたりFlexboxレイアウトに関する記事をまとめてみました。これでFlexboxレイアウトのコーディングもバッチリではないでしょうか。今後レスポンシブ対応が必然となってくる時がくるかと思いますので、今の間にマスターしておくことをオススメします!今回もサンプルはこちらに用意いたしましたので参考にどうぞ!

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

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

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

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

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

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

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

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

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

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

CAPTCHA


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