スマートフォン・タブレットからインターネットサーバーオペレーション

APPW.jp HTML5.x

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

2013年2月6日 (水曜日) 19:18

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

今回は、Dimension(寸法)についてです。表示イメージは、Chrome 24 のスクリーンショットです。

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

 

CSS


.flexContainer {
  display:         flex ;
  display: -webkit-flex ;
    
          flex-flow: row nowrap ;
  -webkit-flex-flow: row 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: 240px ;
  height: 240px ;
  border: 5px solid #999 ;
  background: #ffeebb ;
}
.flexItem {
          flex: none ;
  -webkit-flex: none ;

  width: 90px ;
  height: 90px ;

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

表示イメージ

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

Flex Container

First
Second
Last

CSS


.flexContainer {
  display:         flex ;
  display: -webkit-flex ;
    
          flex-flow: row nowrap ;
  -webkit-flex-flow: row 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: 240px ;
  height: 240px ;
  border: 5px solid #999 ;
  background: #ffeebb ;
}
.flexItem {
          flex: initial ;
  -webkit-flex: initial ;

  width: 90px ;
  min-width: 60px ;
  height: 90px ;

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

表示イメージ

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

Flex Container

First
Second
Last

CSS


.flexContainer {
  display:         flex ;
  display: -webkit-flex ;
    
          flex-flow: row nowrap ;
  -webkit-flex-flow: row 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: 240px ;
  height: 240px ;
  border: 5px solid #999 ;
  background: #ffeebb ;
}
.flexItem {
          flex: auto ;
  -webkit-flex: auto ;

  height: 90px ;

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

表示イメージ

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

Flex Container

First
Second
Last

HTML


<p>Flex Container</p>
<div class="flexContainer">
  <div class="flexItem-1">First</div>
  <div class="flexItem-2">Second</div>
  <div class="flexItem-3">Last</div>
</div>    
 

CSS


.flexContainer {
  display:         flex ;
  display: -webkit-flex ;
    
          flex-flow: row nowrap ;
  -webkit-flex-flow: row 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: 240px ;
  height: 240px ;
  border: 5px solid #999 ;
  background: #ffeebb ;
}
.flexItem-1 {
          flex: 1 ;
  -webkit-flex: 1 ;

  height: 90px ;

  margin: 0 0 0 0 ;
  padding: 0 0 0 0 ;
  border: 2px solid #555 ;
  background: #dddd88 ;
}
.flexItem-2 {
          flex: 2 ;
  -webkit-flex: 2 ;

  height: 90px ;

  margin: 0 0 0 0 ;
  padding: 0 0 0 0 ;
  border: 2px solid #555 ;
  background: #dddd88 ;
}
.flexItem-3 {
          flex: 3 ;
  -webkit-flex: 3 ;

  height: 90px ;

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

表示イメージ

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

Flex Container

First
Second
Last