CSS Flexible Box Layout Module 検証サンプルページ（４）

2013年6月26日 (水曜日) 18:53

「CSS Flexible Box Layout Module（W3C Candidate Recommendation, 18 September 2012）」に基づく検証サンプルを作成しています。

Flex Container を２つ並べてみます。「display: flex ;」の場合です。表示イメージは、Chrome 27 のスクリーンショットです。

2013年2月6日現在、Google Chrome ブラウザのバージョン 24 において -webkit- のベンダープレフィックスありで有効となっているようです。また、Opera ブラウザのバージョン 12.14 においては、ベンダープレフィックスなしでも有効のようです。その他のブラウザ、他のバージョンではまだこの仕様に対応されていないかもしれません。また、すべてに対応されていないかもしれません。

CSS Flexible Box Layout Module 検証サンプルページ

（１）~ Direction（方向）とLine（ライン） ~

（２）~ Dimension（寸法） ~

（３）~ Axis（軸） ~

（４）~ ２つの Flex Container「display: flex ;」の場合 ~

（５）~ ２つの Flex Container「display: inline-flex ;」の場合 ~

（６）~ Dimension（寸法）と Line（ライン）の組み合わせ ~

（７）~ Dimension（寸法）の混在 ~

（８）~ Dimension（寸法）の混在と Axis（軸）の調節 ~

HTML


<p>Flex Container</p>
<div class="flexContainer">
  <div class="flexItem">Flex Item 1</div>
  <div class="flexItem">Flex Item 2</div>
  <div class="flexItem">Flex Item 3</div>
</div>
<div class="flexContainer">
  <div class="flexItem">Flex Item 1</div>
  <div class="flexItem">Flex Item 2</div>
  <div class="flexItem">Flex Item 3</div>
</div>

CSS


.flexContainer {
  display:         flex ;
  display: -webkit-flex ;
    
/*          flex-flow: row nowrap ; */
/*  -webkit-flex-flow: row nowrap ; */

          flex-direction: row ;
  -webkit-flex-direction: row ;
          flex-wrap: nowrap ;
  -webkit-flex-wrap: nowrap ;
          justify-content: flex-start ;
  -webkit-justify-content: flex-start ;
          align-items: flex-start ;
  -webkit-align-items: flex-start ;
          align-content: flex-start ;
  -webkit-align-content: flex-start ;

  margin: 0 0 0 0 ;
  padding: 0 0 0 0 ;
  width: 120px ;
  height: 120px ;
  border: 5px solid #999 ;
  background: #ffeebb ;
}
.flexItem {
          flex: none ;
  -webkit-flex: none ;

  margin: 0 0 0 0 ;
  padding: 0 0 0 0 ;
  width: 45px ;
  height: 45px ;
  border: 2px solid #555 ;
  background: #dddd88 ;
}

表示イメージ

ご利用中のブラウザの表示

Flex Container

Flex Item 1

Flex Item 2

Flex Item 3

Flex Item 1

Flex Item 2

Flex Item 3

CSS


.flexContainer {
  display:         flex ;
  display: -webkit-flex ;
    
/*          flex-flow: row wrap ; */
/*  -webkit-flex-flow: row wrap ; */

          flex-direction: row ;
  -webkit-flex-direction: row ;
          flex-wrap: wrap ;
  -webkit-flex-wrap: wrap ;
          justify-content: flex-start ;
  -webkit-justify-content: flex-start ;
          align-items: flex-start ;
  -webkit-align-items: flex-start ;
          align-content: flex-start ;
  -webkit-align-content: flex-start ;

  margin: 0 0 0 0 ;
  padding: 0 0 0 0 ;
  width: 120px ;
  height: 120px ;
  border: 5px solid #999 ;
  background: #ffeebb ;
}
.flexItem {
          flex: none ;
  -webkit-flex: none ;

  margin: 0 0 0 0 ;
  padding: 0 0 0 0 ;
  width: 45px ;
  height: 45px ;
  border: 2px solid #555 ;
  background: #dddd88 ;
}

表示イメージ

ご利用中のブラウザの表示

Flex Container

Flex Item 1

Flex Item 2

Flex Item 3

Flex Item 1

Flex Item 2

Flex Item 3

CSS


.flexContainer {
  display:         flex ;
  display: -webkit-flex ;
    
/*          flex-flow: column nowrap ; */
/*  -webkit-flex-flow: column nowrap ; */

          flex-direction: column ;
  -webkit-flex-direction: column ;
          flex-wrap: nowrap ;
  -webkit-flex-wrap: nowrap ;
          justify-content: flex-start ;
  -webkit-justify-content: flex-start ;
          align-items: flex-start ;
  -webkit-align-items: flex-start ;
          align-content: flex-start ;
  -webkit-align-content: flex-start ;

  margin: 0 0 0 0 ;
  padding: 0 0 0 0 ;
  width: 120px ;
  height: 120px ;
  border: 5px solid #999 ;
  background: #ffeebb ;
}
.flexItem {
          flex: none ;
  -webkit-flex: none ;

  margin: 0 0 0 0 ;
  padding: 0 0 0 0 ;
  width: 45px ;
  height: 45px ;
  border: 2px solid #555 ;
  background: #dddd88 ;
}

表示イメージ

ご利用中のブラウザの表示

Flex Container

Flex Item 1

Flex Item 2

Flex Item 3

Flex Item 1

Flex Item 2

Flex Item 3

CSS


.flexContainer {
  display:         flex ;
  display: -webkit-flex ;
    
/*          flex-flow: column wrap ; */
/*  -webkit-flex-flow: column wrap ; */

          flex-direction: column ;
  -webkit-flex-direction: column ;
          flex-wrap: wrap ;
  -webkit-flex-wrap: wrap ;
          justify-content: flex-start ;
  -webkit-justify-content: flex-start ;
          align-items: flex-start ;
  -webkit-align-items: flex-start ;
          align-content: flex-start ;
  -webkit-align-content: flex-start ;

  margin: 0 0 0 0 ;
  padding: 0 0 0 0 ;
  width: 120px ;
  height: 120px ;
  border: 5px solid #999 ;
  background: #ffeebb ;
}
.flexItem {
          flex: none ;
  -webkit-flex: none ;

  margin: 0 0 0 0 ;
  padding: 0 0 0 0 ;
  width: 45px ;
  height: 45px ;
  border: 2px solid #555 ;
  background: #dddd88 ;
}

表示イメージ