Untitled

CPI MEGA MIX 2016
CSS3 のレイアウトモジュール
Flexbox を使ってみよう
2016-7-23（土）
15:30 ‒ 16:10
LINE@ 始めました
cpi-line
本日のお題
CSS3のレイアウトモジュール
Flexnboxを使ってみよう -
Flexbox (CSS Flexible Box Layout)とは、
複雑なレイアウト実装が可能なCSS3の
レイアウトモジュール
2016年5月26日に勧告候補になったことや、
IE10から利用が可能なので昨今人気のプロパティ
JS不要
コンテンツの増減
Boxの高さが同じ
レスポンシブ対応
情報ソース：Hero Flex-list
(http://codepen.io/lukejacksonn/pen/MwKOKR )
IE8、9対応
Flexibility ライブラリ
https://github.com/jonathantneal/ﬂexibility
Flexboxのプロパティ
display
order
ﬂex-direction
ﬂex（ﬂex-grow、ﬂex-shrink、ﬂex-basis）
ﬂex-wrap
justify-content
align-items、align-self
align-content
Container（Flex container）
Flex items
order
1
3
2
Flex-direction
1
2
3
1
2
3
Value: row ¦ row-reverse ¦ column ¦ column-reverse
flex-wrap
1
2
3
4
Value: nowrap ¦ wrap ¦ wrap-reverse
Justify-content
1
2
3
Value:
ﬂex-start ¦ ﬂex-end ¦ center
space-between ¦ space-around
4
ﬂex
1
1
1
Value:
none ¦ [ < ﬂex-grow > < ﬂex-shrink >? ¦¦ < ﬂex-basis > ]
Initial: 1 0 auto
align-items
1
1
1
Value:
ﬂex-start ¦ ﬂex-end ¦ center ¦ baseline ¦ stretch
align-content
1
1
1
1
1
1
Value:
ﬂex-start ¦ ﬂex-end ¦ center
space-between ¦ space-around ¦ stretch
ありがとうございました
cpi-line
阿部正幸
ID：chiyo.abe

Download Report