スマートフォン・タブレットからインターネットサーバーオペレーション
APPW.jp HTML5.x
「CSS Flexible Box Layout Module(W3C Candidate Recommendation, 18 September 2012)」に基づく検証サンプルを作成しています。
今回は、Dimension(寸法)についてです。表示イメージは、Chrome 24 のスクリーンショットです。
2013年2月6日現在、Google Chrome ブラウザのバージョン 24 において -webkit- のベンダープレフィックスありで有効となっているようです。また、Opera ブラウザのバージョン 12.14 においては、ベンダープレフィックスなしでも有効のようです。その他のブラウザ、他のバージョンではまだこの仕様に対応されていないかもしれません。また、すべてに対応されていないかもしれません。
(1)~ Direction(方向)とLine(ライン) ~
(2)~ Dimension(寸法) ~
(4)~ 2つの Flex Container「display: flex ;」の場合 ~
(5)~ 2つの 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
(1)~ Direction(方向)とLine(ライン) ~
(2)~ Dimension(寸法) ~
(4)~ 2つの Flex Container「display: flex ;」の場合 ~
(5)~ 2つの Flex Container「display: inline-flex ;」の場合 ~
via IPv4