CSS Flexible Box Layout Module 検証サンプルページ（２）
「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 Flexible Box Layout Module 検証サンプルページ
（１）~ Direction（方向）とLine（ライン） ~
（２）~ Dimension（寸法） ~
（４）~ ２つの Flex Container「display: flex ;」の場合 ~
（５）~ ２つの Flex Container「display: inline-flex ;」の場合 ~
HTML
<p>Flex Container</p>
<div class="flexContainer">
<div class="flexItem">First</div>
<div class="flexItem">Second</div>
<div class="flexItem">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 {
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
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
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
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
CSS Flexible Box Layout Module 検証サンプルページ
（１）~ Direction（方向）とLine（ライン） ~
（２）~ Dimension（寸法） ~
（４）~ ２つの Flex Container「display: flex ;」の場合 ~
（５）~ ２つの Flex Container「display: inline-flex ;」の場合 ~
via IPv4