FLEXBOX-MEN: Apocalypse

FLEXBOX-MEN: Apocalypse

2016-06-11開催のHTML Party かごんま 2016で行ったセッション「FLEXBOX-MEN: Apocalypse」のスライド。

582e704d86157b464e1933c6d104cce0?s=128

Fuminori Mori

June 11, 2016
Tweet

Transcript

  1. 2.

    ໨࣍ • ࣗݾ঺հ • FLEXBOX-MEN: Apocalypse • ϨΠΞ΢τํ๏ͷൺֱ • ศརϙΠϯτ

    • Flexbox • ஍ཕϙΠϯτ • ϑϨʔϜϫʔΫ • ·ͱΊ 2 © Coding Design, 2016
  2. 6.

    ࣗݾ঺հ(3/3) • ΧϨʔLOVE!! ⭐ΧϨʔ԰ ঊ #ঊ੝ • ϏʔϧLOVE!! ⭐৓ࢁ؍ޫϗςϧ #ελ΢τΤʔϧࠇ౶

    • νϣίϨʔτLOVE!! ⭐ύςΟεϦʔϠφΪϜϥ #Ḉຎνϣίνοϓε 6 © Coding Design, 2016
  3. 26.

    FLEXBOX-MEN: Apocalypse > ศརϙΠϯτ • HTML͕ߥΕͳ͍ • ্ԼਅΜதد͕ͤͰ͖Δ • ཁૉͷฒ΂ସ͕͑Ͱ͖Δ

    • ཁૉͷվߦ࣌ʹ伱͕ؒͰ͖ͳ͍ • εΫϩʔϧόʔ͕දࣔ͞ΕΔ 26 © Coding Design, 2016
  4. 30.

    FLEXBOX-MEN: Apocalypse > Flexbox Flexboxͷجຊ Flexbox͸਌ཁૉͱࢠཁૉ͕ඞཁͩʂ <div class="container"> <div class="item">item

    1</div> <div class="item">item 2</div> <div class="item">item 3</div> </div> 30 © Coding Design, 2016
  5. 32.

    FLEXBOX-MEN: Apocalypse > Flexbox Flexboxͷجຊ flex-direction ͰࢠཁૉͷϨΠΞ΢τΛ੍ޚͰ͖Δͧʂ ஋͸ row, row-reverse,

    column, column-reverse ͩʂ .container { display: flex; flex-direction: column-reverse; } 32 © Coding Design, 2016
  6. 34.

    FLEXBOX-MEN: Apocalypse > Flexbox ࢠཁૉͷਫฏํ޲ͷἧ͑ justify-content Ͱࢠཁૉͷਫฏํ޲ͷἧ͑Λ੍ޚͰ͖ΔΘʂ ஋͸ flex-start, flex-end,

    center, space-between, space-around Αʂ .container { display: flex; justify-content: center; } 34 © Coding Design, 2016
  7. 36.

    FLEXBOX-MEN: Apocalypse > Flexbox ࢠཁૉͷਨ௚ํ޲ͷἧ͑ align-items Ͱࢠཁૉͷਨ௚ํ޲ͷἧ͑Λ੍ޚͰ͖ΔͬͪΑʂ ஋͸ flex-start, flex-end,

    center, baseline, stretch ͡ΌͬͲʂ .container { display: flex; align-items: center; } 36 © Coding Design, 2016
  8. 38.

    FLEXBOX-MEN: Apocalypse > Flexbox ࢠཁૉͷંฦ͠ flex-wrap ͰࢠཁૉͷંΓฦ͠Λ੍ޚͰ͖Δͥʂ ஋͸ nowrap, wrap,

    wrap-reverse ͩ΂ʂ .container { display: flex; flex-wrap: wrap-reverse; } 38 © Coding Design, 2016
  9. 40.

    FLEXBOX-MEN: Apocalypse > Flexbox ࢠཁૉ͕ॎʹෳ਺ฒΜͩ࣌ͷἧ͑ align-content Ͱࢠཁૉ͕ॎʹෳ਺ฒΜͩ࣌ͷἧ͑Λ੍ޚͰ͖Δʂ ஋͸ flex-start, flex-end,

    center, space-between, space-around Λ࢖͍ ΍Μͤʂ .container { display: flex; align-content: flex-end; } 40 © Coding Design, 2016
  10. 43.

    FLEXBOX-MEN: Apocalypse > Flexbox ࢠཁૉ͝ͱʹࢦఆ align-self Ͱݸผͷࢠཁૉͷਨ௚ํ޲ͷἧ͑Λ੍ޚͰ͖ͬͪʂ ஋͸ flex-start, flex-end,

    center, baseline, stretch ΛೖΕ΋Μͦʂ .item:nth-child(2) { align-self: flex-end; } 43 © Coding Design, 2016
  11. 47.

    FLEXBOX-MEN: Apocalypse > ஍ཕϙΠϯτ ϒϥ΢βαϙʔτ • Can I use -

    Flexible Box Layout Module http:/ /caniuse.com/#feat=flexbox 47 © Coding Design, 2016
  12. 49.

    FLEXBOX-MEN: Apocalypse > ஍ཕϙΠϯτ ϒϥ΢βαϙʔτ • IE͸10Ҏ্αϙʔτ • ରࡦɿ IE9ҎԼ͸floatͰϨΠΞ΢τ͢Δ͔ɺ

    flexibility.js Λ࢖ ͏͔ɺαϙʔτ֎ʹ͢Δ͔ • ৿͸flexibility.jsະ࢖༻ɻ͓͢͢Ί͸͠·ͤΜ 49 © Coding Design, 2016
  13. 50.

    FLEXBOX-MEN: Apocalypse > ஍ཕϙΠϯτ ϒϥ΢βαϙʔτ • Android4.3Ҏલ͸ݹ͍࢓༷Ͱͷ࣮૷ • ྫʣAndroid4.4Ҏ߱ display:

    flex; ɹˠ Android4.3Ҏલ display: -webkit-box; • ରࡦɿ Sass flexbox mixin Λ࢖͏͔ɺαϙʔτ֎ʹ͢Δ͔ 50 © Coding Design, 2016
  14. 51.

    FLEXBOX-MEN: Apocalypse > ஍ཕϙΠϯτ όά • IE10, IE11 • ਌ཁૉʹmin-heightΛࢦఆ͢Δͱalign-items͕ޮ͔ͳ͍

    • ରࡦɿ ਌ཁૉͷ͞Βʹ਌ཁૉʹdisplay: flex; flex-direction: column;Λઃఆ 51 © Coding Design, 2016
  15. 52.

    FLEXBOX-MEN: Apocalypse > ஍ཕϙΠϯτ όά • IE10, IE11 • ࢠཁૉʹflex-basisΛઃఆ͠ͳ͍ͱ௕͍จষΛંΓฦ͞ͳ͍

    • ରࡦɿ ෯ʹ߹Θͤͯࢠཁૉʹflex-basisͱmax-widthΛઃఆ • max-widthΛࢦఆ͢Δͷ͸box-sizing: border-box;ʹରԠͤ͞Δ ͨΊ 52 © Coding Design, 2016
  16. 53.

    FLEXBOX-MEN: Apocalypse > ஍ཕϙΠϯτ όά • IE10, IE11 • ࢠཁૉʹimgཁૉΛೖΕΔͱը૾ͷॎԣൺ่͕ΕΔ

    • ରࡦɿ ࢠཁૉ͸divཁૉͳͲΛೖΕɺͦͷதʹimgཁૉΛೖΕ Δ 53 © Coding Design, 2016
  17. 63.

    FLEXBOX-MEN: Apocalypse > ϑϨʔϜϫʔΫ • Flexboxͷࣗ༝ʹ࢖͍͍ͨਓ޲͚ • Sass flexbox mixin

    • Autoprefixer • طଘͷFlexboxάϦουΛ࢖͍͍ͨਓ޲͚(CSS) • Flexbox Grid • FlexboxάϦουΛΧελϚΠζͯ͠࢖͍͍ͨਓ޲͚(Sass) • Flexbox Grid Sass 63 © Coding Design, 2016