Transcript

• 1. 5分でわかるFlexbox @a_t
• 2. box iOS ~6 Adr ~4.3 ＞ flexbox IE10 ＞ flex modern
• 3. http://caniuse.com/#feat=flexbox
• 4. http://caniuse.com/#feat=flexbox
• 5. 関連プロパティ box display:box box-orient box-direction box-lines box-pack box-align box-ordinal-group box-flex box-flex-group flexbox display:flexbox flex-direction flex-wrap flex-flow flex-pack flex-align flex-item-align flex-line-pack flex-order flex flex display:flex flex-direction flex-wrap flex-flow justify-content align-items align-self align-content order flex
• 6. display:flex display:flexbox display:box Flexboxの宣言 align-items flex-align box-align justify-content flex-pack box-pack 縦横の揃え flex box-flex 幅の拡張
• 7. Flexboxの宣言 "display:flex;" Flexのトリガー 指定すると子要素が横並び
• 8. display:flex <ul style="display:flex;"> <li>foo</li> <li>bar<br>bar<br>bar</li> <li>hoge</li> </ul> foo bar bar bar hogehoge
• 9. 縦横の揃え "align-items / justify-content" 子要素の縦横の並びの指定
• 10. 初期値 <ul style="display:flex; align-items:stretch; justify-content:flex-start;"> <li>foo</li> <li>bar<br>bar<br>bar</li> <li>hoge</li> </ul> foo bar bar bar hogehoge
• 11. 別の値を指定した場合 <ul style="display:flex; align-items:center; justify-content:center;"> <li>foo</li> <li>bar<br>bar<br>bar</li> <li>hoge</li> </ul> foo bar bar bar hogehoge
• 12. 幅の拡張 "flex" 親要素の幅まで、子要素の幅を拡張する
• 13. flex:[拡幅率] [幅減率] [基準幅] <ul style="display:flex;"> <li style="flex:0 1 auto;">foo</li> <li>bar<br>bar<br>bar</li> <li>baz</li> </ul> foo bar bar bar baz 初期値はflex:0 1 auto
• 14. 拡張する場合 <ul style="display:flex;"> <li style="flex:1 1 auto;">foo</li> <li>bar<br>bar<br>bar</li> <li>baz</li> </ul> foo bar baz
• 15. 幅= コンテンツ幅+ 分配幅 <ul style="display:flex;"> <li style="flex:1 1 auto;">foo</li> <li style="flex:1 1 auto;">bar</li> <li style="flex:1 1 auto;">baz</li> </ul> foo bar baz foo bar bazbazbazbazbazbaz
• 16. 均等幅にする場合 <ul style="display:flex;"> <li style="flex:1 1 1px;">foo</li> <li style="flex:1 1 1px;">bar</li> <li style="flex:1 1 1px;">bazbazbazbazbazbaz</li> </ul> foo bar bazbazbazbaz bazbaz
• 17. ul{ display:flex; justify-content:center; align-items:center; } li{ flex:1 1 auto; }
• 18. ul{ display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; -webkit-box-pack:center; -moz-box-pack:center; -ms-flex-pack:center; -webkit-justify-content:center; justify-content:center; -webkit-box-align:center; -moz-box-align:center; -ms-flex-align:center; -webkit-align-items:center; align-items:center; } li{ -webkit-box-flex:1; -moz-box-flex:1; -ms-flex:1 1 auto; -webkit-flex:1 1 auto; flex:1 1 auto; }
• 19. 擬似要素 <ul style="display:flex;"> ::before <li>foo</li> <li>bar<br>bar<br>bar</li> <li>baz</li> ::after </ul> before foo bar bar bar baz after
• 20. テキストノード <p style="text-align:center;">foo</p> foo <p style="text-align:center; display:flex">foo</p> foo Lorem ipsum dolor sit amet, consectetur adipisicing elit,
• 21. display:flex display:flexbox display:box Flexboxの宣言 align-items flex-align box-align justify-content flex-pack box-pack 縦横の揃え flex box-flex 幅の拡張 flexboxの旧仕様、改定仕様、現行仕様の一覧