CSS - flex

概要

属性名	flex
値	none \| [ <flex-grow> <flex-shrink>? \|\| <flex-basis> ]
初期値	0 1 auto
適用可能要素	フレックスアイテム
継承	継承しない
メディア	visual
アニメーション	不可

サポート (説明)

CSS	IE/Edge	Firefox	Chrome	Opera	Safari
CSS3	11	20	21(-webkit) 29	15(-webkit) 17	6.1(-webkit) 9

説明

flex-grow, flex-shrink, flex-basis をまとめて指定します。

フレックスボックスの基礎知識

コンテンツを横に並べるには、初期の時代はテーブルが使用されていました。CSS1～CSS2 の時代には、float:left と clearfix を用いた手法が用いられていましたが、今後は CSS3 で策定中のフレックスボックスが主流になると思われます。ただ、CSS3 での仕様が数回変更されていることや、IE でのサポートが遅れたことから、一般的に使用されるには、もう少しだけ時間がかかりそうです。

フレックスボックスを用いて、コンテンツを横方向に並べることができます。並べる要素をフレックスアイテム、それを包含する要素をフレックスコンテナと呼びます。display に flex を指定することでフレックスコンテナを作成します。フレックスコンテナの子要素はフレックスアイテムとして扱われます。

フレックスコンテナ
フレックスアイテムA	フレックスアイテムB	フレックスアイテムC

フレックスボックスを用いることで、ページを下記の様なペインに分割することが可能となります。

Header

Main

Info

フレックスボックスを作成するには、まず、フレックスコンテナに display:flex または inline-flex を指定します。仕様策定中に名前が変更されたり、ベンダプレフィックスが必要だったりするため、多くのブラウザに対応するには下記の様に指定します。

CSS

.flexbox {
  display: -webkit-box;   /* Chrome 4-20, Firefox 2-21, Safari 3.1-6.0 */
  display: -webkit-flex;  /* Chrome 21-27 */
  display: -moz-box;      /* Firefox 2-21 */
  display: -ms-flexbox;   /* IE9 */
  display: flex;
}
.inline-flexbox {
  display: -webkit-inline-box;   /* Chrome 4-20, Safari 3.1-6.0 */
  display: -webkit-inline-flex;  /* Chrome 21-27 */
  display: -moz-inline-box;      /* Firefox 2-21 */
  display: -ms-inline-flexbox;   /* IE9 */
  display: inline-flex;
}

フレックスボックス関連の CSS 属性には下記があります。

display - フレックスコンテナを生成します。
flex-direction フレックスアイテムの並び方向(横並び・縦並び)を指定します。
flex-wrap - フレックスアイテムの行替えの許可・禁止を制御します。
flex-flow - flex-direction と flex-wrap をまとめて指定します。
order - フレックスアイテムを表示する順序を指定します。
flex - flex-grow, flex-shrink, flex-basis をまとめて指定します。
flex-grow - フレックスアイテムの幅(高さ)を引き延ばす割合を指定します。
flex-shrink - フレックスアイテムの幅(高さ)を圧縮する割合を指定します。
flex-basis - フレックスアイテムの幅(高さ)を指定します。
justify-content - フレックスアイテム間の横方向の余白を制御します。
align-items - フレックスアイテムの並べ方(上寄せなど)を制御します。
align-self - フレックスアイテムの並べ方(上寄せなど)を制御します。
align-content - フレックスアイテム間の縦方向の余白を制御します。

使用例

CSS

.flexbox {
  display: flex;
  display: -ms-flexbox;
  padding: 10px;
  border: 1px solid #999;
  background-color: #ddd;
}
.boxA, .boxB, .boxC {
  border: 1px solid #999;
  text-align: center;
}
.boxA { flex: 1; background-color: #fcc; }
.boxB { flex: 2; background-color: #cfc; }
.boxC { flex: 3; background-color: #ccf; }

HTML

<div class="flexbox">
 <div class="boxA">A</div>
 <div class="boxB">B</div>
 <div class="boxC">C</div>
</div>

表示

リンク

初版：2015年11月22日、最終更新：2015年11月22日

https://www.tohoho-web.com/css/prop/flex.htm

CSS - flex

概要

サポート (説明)

説明

フレックスボックスの基礎知識

使用例

関連項目

リンク