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. FLEXBOX-MEN: Apocalypse ʙdisplay: flex Ͱ ॊೈʹϨΠΞ΢τ͠Α͏ʂʙ @HTML Party ͔͝Μ· 2016

    ίʔσΟϯάσβΠϯɹ৿ ࢙ݑ 1 © Coding Design, 2016
  2. ໨࣍ • ࣗݾ঺հ • FLEXBOX-MEN: Apocalypse • ϨΠΞ΢τํ๏ͷൺֱ • ศརϙΠϯτ

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

  4. ࣗݾ঺հ(1/3) • ໊લ ৿ɹ࢙ݑ ʢ΋Γɹ;ΈͷΓʣ • ੜ೥݄೔ ত࿨51೥6݄9೔ • ग़਎ɾݱॅॴ

    ࣛࣇౡݝࣛࣇౡࢢ • ༰࢟ ؙϝΨω 4 © Coding Design, 2016
  5. ࣗݾ঺հ(2/3) • WebαΠτ੍࡞ • Webؔ࿈ٕज़ߨࢣ • Webؔ࿈ॻ੶ࣥච • ΠϕϯτӡӦ 5

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

    • νϣίϨʔτLOVE!! ⭐ύςΟεϦʔϠφΪϜϥ #Ḉຎνϣίνοϓε 6 © Coding Design, 2016
  7. WebͷϨΠΞ΢τ͸ ೰·͍͠ 7 © Coding Design, 2016

  8. ո्ͷΑ͏ʹ ๫Ε·͘Δ 8 © Coding Design, 2016

  9. Ռͨͯ͠߈ུͰ͖Δ೔ ͸དྷΔͷ͔… 9 © Coding Design, 2016

  10. 10 © Coding Design, 2016

  11. FLEXBOX-MEN: Apocalypse 11 © Coding Design, 2016

  12. FLEXBOX-MEN: Apocalypse WebͷϨΠΞ΢τ͸ͻͱےೄͰ͸͍͔ͳ͍ʂ ͦ͏ɺ͍͋ͭ͸େո्… Webzilla!! 12 © Coding Design, 2016

  13. FLEXBOX-MEN: Apocalypse ϨΠΞ΢τํ๏ͷൺֱ 13 © Coding Design, 2016

  14. FLEXBOX-MEN: Apocalypse > ϨΠΞ΢τํ๏ͷൺֱ Webzilla Λ߈ུ͢Δ ༷ʑͳϨΠΞ΢τํ๏ ͕࢖ΘΕͨʂ 14 ©

    Coding Design, 2016
  15. FLEXBOX-MEN: Apocalypse > ϨΠΞ΢τํ๏ͷൺֱ 1. table 2. float 3. inline-block

    4. position 15 © Coding Design, 2016
  16. FLEXBOX-MEN: Apocalypse > ϨΠΞ΢τํ๏ͷൺֱ ͲΕ΋ଳʹ୹͖ͨ͢͠ ʹ௕͠… 16 © Coding Design,

    2016
  17. ͏ʔΉɺWebzilla͸ खڧ͍ʂ 17 © Coding Design, 2016

  18. ॿ͚ͯʂ FLEXBOX-MENʂ 18 © Coding Design, 2016

  19. 19 © Coding Design, 2016

  20. ݺΜ͔͍ͩʂ 20 © Coding Design, 2016

  21. FlexboxΛ࢖ͬͯ 21 © Coding Design, 2016

  22. Ұॹʹ߈ུ͠Α͏ 22 © Coding Design, 2016

  23. ͥͬ 23 © Coding Design, 2016

  24. FLEXBOX-MEN: Apocalypse ศརϙΠϯτ 24 © Coding Design, 2016

  25. FLEXBOX-MEN: Apocalypse > ศརϙΠϯτ FlexboxͷศརϙΠϯτͱ ࣮ࡍͷ࢖͍ํΛݟ͍ͯ͜͏ʂ 25 © Coding Design,

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

    • ཁૉͷվߦ࣌ʹ伱͕ؒͰ͖ͳ͍ • εΫϩʔϧόʔ͕දࣔ͞ΕΔ 26 © Coding Design, 2016
  27. FLEXBOX-MEN: Apocalypse > ศརϙΠϯτ ͜Ε·Ͱͷ໰୊͕Ұڍʹղܾʂ Ͱ͸࢖͍ํΛݟͯΈΑ͏ʂ 27 © Coding Design,

    2016
  28. FLEXBOX-MEN: Apocalypse Flexbox 28 © Coding Design, 2016

  29. FLEXBOX-MEN: Apocalypse > Flexbox Flexboxͷجຊ 29 © Coding Design, 2016

  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
  31. FLEXBOX-MEN: Apocalypse > Flexbox Flexboxͷجຊ display: flex; Ͱ਌ཁૉʹFlexboxΛઃఆ͢Δʂ .container {

    display: flex; } 31 © Coding Design, 2016
  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
  33. FLEXBOX-MEN: Apocalypse > Flexbox ࢠཁૉͷਫฏํ޲ͷἧ͑ 33 © Coding Design, 2016

  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
  35. FLEXBOX-MEN: Apocalypse > Flexbox ࢠཁૉͷਨ௚ํ޲ͷἧ͑ 35 © Coding Design, 2016

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

    center, baseline, stretch ͡ΌͬͲʂ .container { display: flex; align-items: center; } 36 © Coding Design, 2016
  37. FLEXBOX-MEN: Apocalypse > Flexbox ࢠཁૉͷંฦ͠ 37 © Coding Design, 2016

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

    wrap-reverse ͩ΂ʂ .container { display: flex; flex-wrap: wrap-reverse; } 38 © Coding Design, 2016
  39. FLEXBOX-MEN: Apocalypse > Flexbox ࢠཁૉ͕ॎʹ ෳ਺ฒΜͩ࣌ͷἧ͑ 39 © Coding Design,

    2016
  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
  41. FLEXBOX-MEN: Apocalypse > Flexbox ࢠཁૉ͝ͱʹࢦఆ 41 © Coding Design, 2016

  42. FLEXBOX-MEN: Apocalypse > Flexbox ࢠཁૉ͝ͱʹࢦఆ flex-basis Ͱݸผͷࢠཁૉͷ࠷খ෯Λ੍ޚͰ͖ͬͨͬͲʂ ஋͸ widthϓϩύςΟʹࢦఆ͢ΔΑ͏ͳ஋ ΍ͬͰͳʂ

    .item:nth-child(2) { flex-basis: 200px; } 42 © Coding Design, 2016
  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
  44. FLEXBOX-MEN: Apocalypse > Flexbox ࢠཁૉ͝ͱʹࢦఆ order Ͱݸผͷࢠཁૉͷॱ൪Λ੍ޚͰ͖Δͧʂͨ·͕͕ͬʂ ஋͸ ਺஋ ͡ΌͬͲʂ

    .item:nth-child(2) { order: -1; } 44 © Coding Design, 2016
  45. FLEXBOX-MEN: Apocalypse ஍ཕϙΠϯτ 45 © Coding Design, 2016

  46. FLEXBOX-MEN: Apocalypse ஍ཕϙΠϯτ ࣮͸·ͩة͏͍ͱ͜Ζ͕͋ΔFlexboxʂ গ͚ͩ͠ൈਮͯ͠Έͨʂ 46 © Coding Design, 2016

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

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

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

    flexibility.js Λ࢖ ͏͔ɺαϙʔτ֎ʹ͢Δ͔ • ৿͸flexibility.jsະ࢖༻ɻ͓͢͢Ί͸͠·ͤΜ 49 © Coding Design, 2016
  50. FLEXBOX-MEN: Apocalypse > ஍ཕϙΠϯτ ϒϥ΢βαϙʔτ • Android4.3Ҏલ͸ݹ͍࢓༷Ͱͷ࣮૷ • ྫʣAndroid4.4Ҏ߱ display:

    flex; ɹˠ Android4.3Ҏલ display: -webkit-box; • ରࡦɿ Sass flexbox mixin Λ࢖͏͔ɺαϙʔτ֎ʹ͢Δ͔ 50 © Coding Design, 2016
  51. FLEXBOX-MEN: Apocalypse > ஍ཕϙΠϯτ όά • IE10, IE11 • ਌ཁૉʹmin-heightΛࢦఆ͢Δͱalign-items͕ޮ͔ͳ͍

    • ରࡦɿ ਌ཁૉͷ͞Βʹ਌ཁૉʹdisplay: flex; flex-direction: column;Λઃఆ 51 © Coding Design, 2016
  52. FLEXBOX-MEN: Apocalypse > ஍ཕϙΠϯτ όά • IE10, IE11 • ࢠཁૉʹflex-basisΛઃఆ͠ͳ͍ͱ௕͍จষΛંΓฦ͞ͳ͍

    • ରࡦɿ ෯ʹ߹Θͤͯࢠཁૉʹflex-basisͱmax-widthΛઃఆ • max-widthΛࢦఆ͢Δͷ͸box-sizing: border-box;ʹରԠͤ͞Δ ͨΊ 52 © Coding Design, 2016
  53. FLEXBOX-MEN: Apocalypse > ஍ཕϙΠϯτ όά • IE10, IE11 • ࢠཁૉʹimgཁૉΛೖΕΔͱը૾ͷॎԣൺ่͕ΕΔ

    • ରࡦɿ ࢠཁૉ͸divཁૉͳͲΛೖΕɺͦͷதʹimgཁૉΛೖΕ Δ 53 © Coding Design, 2016
  54. FLEXBOX-MEN: Apocalypse > ஍ཕϙΠϯτ όά ৄ͘͠͸ Flexbugs ΛνΣοΫʂओʹIE10, 11͕ଟ͍ʂ όάɾղܾࡦͷσϞ͕͋ΔΑʂ

    • Flexbugs 54 © Coding Design, 2016
  55. FLEXBOX-MEN: Apocalypse > ஍ཕϙΠϯτ JavaScriptͰͷૢ࡞ • flex-direction΍orderͰॱ൪Λม͑ͯ΋DOMͷॱ൪͸มΘ͍ͬͯ ͳ͍ • CSSͰॱ൪Λม͑ΔલͷHTML͕ϕʔεʹ೦಄ʹஔ͘ɻ

    55 © Coding Design, 2016
  56. flex-direction flex-wrap justify-content align-items flex-basis… 56 © Coding Design, 2016

  57. ϒϥ΢βαϙʔτ όά JavaScriptͷରԠ… 57 © Coding Design, 2016

  58. ͋͋ɺ΋͏಄͕͍ͬͺ ͍ͩ͊͊͊ʂʂʂʂ 58 © Coding Design, 2016

  59. ͽΜΆʔΜ 59 © Coding Design, 2016

  60. ͦΜͳ͋ͳͨʹ࿕ใɻ 60 © Coding Design, 2016

  61. FLEXBOX-MEN: Apocalypse ϑϨʔϜϫʔΫ 61 © Coding Design, 2016

  62. FLEXBOX-MEN: Apocalypse ϑϨʔϜϫʔΫ ͜Μʹͪ͸ɻ௕׭Ͱ͢ɻ όάରࡦ΋͞ΕͯͨΓ͢ΔͷͰɺϑϨʔϜϫʔΫΛ࢖͓͏Ͷʂ 62 © Coding Design, 2016

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

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

  65. Flexbox͸ ϨΠΞ΢τ͢Δͷʹ ͢͝ʔ͘ศརʂ 65 © Coding Design, 2016

  66. ͨͩ͠ɺ ର৅ϒϥ΢βʹ͸஫ҙʂ 66 © Coding Design, 2016

  67. ϒϥ΢β͝ͱʢओʹIE10,11ʣͷ όάʹ΋஫ҙʂ 67 © Coding Design, 2016

  68. ͋͞࠷ޙͷରܾͩʂ WebzillaΛಈ͔ͯ͠ ಎ۸ʹೖΕΑ͏ʂ 68 © Coding Design, 2016

  69. ͋Γ͕ͱ͏!܅ͷ׆༂Ͱ ੈք͸ٹΘΕͨΑʂ 69 © Coding Design, 2016

  70. ͜Ε͔Β΋FlexboxΛ࢖ ͬͯੈքΛٹͬͯͶʂ 70 © Coding Design, 2016

  71. ͝ਗ਼ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠οοʂ 71 © Coding Design, 2016