CSS - flex

トップ > CSSリファレンス > flex

概要

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

サポート (説明)

CSSIE/EdgeFirefoxChromeOperaSafari
CSS3112021(-webkit)
29
15(-webkit)
17
6.1(-webkit)
9

説明

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

フレキシブルボックスの基礎知識

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

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

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

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

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 属性には下記があります。

使用例

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>
表示
A
B
C

関連項目

flex-direction, flex-wrap, flex-flow, order, flex, flex-grow, flex-shrink, flex-basis, justify-content, align-items, align-self, align-content

リンク


Copyright (C) 2015 杜甫々
初版:2015年11月22日、最終更新:2015年11月22日
http://www.tohoho-web.com/css/prop/flex.htm