box-flexとは?CSSのbox-flexで伸縮ボックスの伸縮比率を指定する方法

今回はHTMLを書く上で欠かせない伸縮ボックスの比率の変え方のお話。

CSSの【box-flex】プロパティで思い通りに伸縮ボックスの比率を決めようと思っても・・初心者のうちは

うまく伸縮ボックスの比率の指定ができない!!
伸縮ボックスの比率を指定しても、うまく反映されない!!

今回は、そんなCSSの【box-flex】プロパティに関する

・基本的な使い方

について説明します。

【box-flex】とは

【box-flex】の読み方

CSSの【box-flex】プロパティは、伸縮ボックスの伸縮比率を指定する際に使用します。

【box-flex】の説明

伸縮ボックスとは、【box-flex】プロパティが指定された要素を指しています。

ボックス内に余ったスペースがある場合に【box-flex】プロパティをボックス要素内の子要素に指定すると、子ボックスが引き伸ばされてスペースが埋められます。

【box-flex】プロパティの値は数値で指定しますが、ボックス内の子要素は指定数値に応じた比率で伸縮します。

【box-flex】で利用できる値

【box-flex】プロパティでは以下の値を使うことができます。

説明
数値 要素が伸縮する比率を正の数値で指定する(初期値は0.0)

対応ブラウザ

対応ブラウザは以下の通りです。

PC用ブラウザ 対応状況
Chrome 完全対応
Edge 完全対応
Firefox  完全対応
Internet Explorer  非対応
Opera  完全対応
Safari  完全対応
スマートフォン用ブラウザ 対応状況
Android webview  完全対応
Android版Chrome 完全対応
Android版Firefox 完全対応
Android 版 Opera  完全対応
iOS版Safari  完全対応
Samsung Internet  完全対応

【box-flex】の基本的な使い方

ここでは、【box-flex】プロパティの基本的な使い方について説明していきます。

各属性値の設定の仕方も合わせて説明していきます。

ベンダープレフィックスなしの場合の使用例

ベンダープレフィックスとは、簡単に言ってしまうとそれぞれのブラウザでCSSを正しく適用するための識別子です。

ブラウザによってベンダープレフィックスを付けておかないと適用されないCSSのプロパティがありますが、ベンダープレフィックスを付けることによって正しく表示させることができます。

HTML

CSS

     ⬇

上記の実行例のように、ベンダープレフィックスなしでは【box-flex】プロパティが正しく機能しないことがあります。

そのため次の例のようにベンダープレフィックスを使ったコーディングをオススメします。

ベンダープレフィックスを付けた場合の使用例

HTML

CSS

     ⬇

ベンダープレフィックスのおかげで、正しく【box-flex】プロパティが機能していますね。

上記の実行例のように、ブラウザが常に最新版へアップデートされているという訳ではないため、保険としてベンダープレフィックスを付けておくことをオススメします。

IEなど一部非対応のブラウザあり

すでに説明しましたが、CSSプロパティ【box-flex】プロパティは、IEでは反映されないのでご注意ください。

まとめ

いかがでしたか?

今回は【box-flex】プロパティの基本的な使い方を説明しました。

これで、【box-flex】プロパティを使って、伸縮ボックスの比率を自在に設定できますね!

Webコンテンツの作成の際に、大きく役立つことでしょう。

閲覧者が見やすいように、工夫してみてください!!

この記事がお役に立てれば幸いです。

参考文献:http://www.htmq.com/css3/box-flex.shtml

 

 

BLOGコンテンツをパーソナライズします

あなたは現在「プログラミング学習者」ですか?