Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Layout with CSS - display : flex;

Layout with CSS - display : flex;

display : flex;

Masateru YOSHIMURA

June 16, 2020
Tweet

More Decks by Masateru YOSHIMURA

Other Decks in Programming

Transcript

  1. ശΛԣʹฒ΂Δ ը૾ จࣈ ը૾ จࣈ ը૾ จࣈ ը૾ ·ͣɺฒ΂͍ͨ΋ͷΛ େ͖ͳശʹೖΕΔɻ

    ͦͷ͋ͱɺ େ͖ͳശʹରͯ͠ ʮத਎Λԣʹฒ΂ͯʯ ͱ͍͏ࢦࣔΛ͢Δͱɺ ͜ͷΑ͏ʹฒΜͰ͘ΕΔɻ ˞ฒ΂͍ͨ΋ͷʹ ʮฒΜͰʯͱݴͬͯ΋ ฒΜͰ͘Εͳ͍ͷͰ஫ҙ͠Α͏ɻ ͋͞ɺ͜͜·ͰͷखॱΛ )5.-ͱ$44Ͱදݱ͍͖ͯ͠·͢ɻ
  2. ը૾ͱจࣈ͕ೖΔശΛ४උͯ͠ɺͦ͜ʹίϯςϯπʢը૾΍จࣈʣΛೖΕΔ ը૾ͷೖΔ಺ശ จࣈͷೖΔ಺ശ ͜ΕΒΛ·ͱΊͨ֎ശ λΠΨʔΤοά .item ͱೖྗͯ͠λϒΩʔΛԡ͢ͱɺ <div class="item"></div> )5.-Ͱද͢

    ശ DMBTTΛ࢖ͬͯശʹ໊લΛ෇͚Δɻ ޙʑͷελΠϦϯάͷͨΊɺ ശʹ͸Θ͔Γ΍໊͍͢લΛ෇͚Δɻ ໊લʹϧʔϧ͸ͳ͘ɺࣗ෼ͰܾΊΔɻ ֎ശʹʮJUFNʯͱ͍͏໊લΛ෇͚Α͏ ͱల։͞ΕΔɻ ͜ͷதʹɺ ͭͷ಺ശΛ࡞Δɻ Πϥετ͸IUUQTQVCMJDEPNBJOWFDUPSTPSH͔Βμ΢ϯϩʔυͨ͠ஶ࡞ݖϑϦʔͷ΋ͷͰ͢ɻ Α͘ݟ͍ͯͩ͘͞ʂ͋ͨ·ʹυοτ͕෇͍͍ͯ·͢
  3. ը૾ͱจࣈ͕ೖΔശΛ४උͯ͠ɺͦ͜ʹίϯςϯπʢը૾΍จࣈʣΛೖΕΔ ը૾ͷೖΔ಺ശ จࣈͷೖΔ಺ശ ͜ΕΒΛ·ͱΊͨ֎ശ λΠΨʔΤοά <div class="item"> <div class="item-image"></div> <div

    class="item-text"></div> </div> )5.-Ͱද͢ ͜ͷ಺ശʹʮJUFNJNBHFʯͱ͍͏໊લΛ෇͚Α͏ ͜ͷ಺ശʹʮJUFNUFYUʯͱ͍͏໊લΛ෇͚Α͏ ͜ΕΒͷ ಺ശʹ ίϯςϯπΛ ೖΕΔɻ
  4. ը૾ͱจࣈ͕ೖΔശΛ४උͯ͠ɺͦ͜ʹίϯςϯπʢը૾΍จࣈʣΛೖΕΔ ը૾ͷೖΔ಺ശ จࣈͷೖΔ಺ശ ͜ΕΒΛ·ͱΊͨ֎ശ λΠΨʔΤοά <div class="item"> <div class="item-image"> <img

    src="*****1.png" alt=""> </div> <div class="item-text"> λΠΨʔΤοά </div> </div> )5.-Ͱද͢ ͦΕͧΕͷ಺ശʹ ίϯςϯπΛೖΕΔɻ ͜Εͱಉ͡ߏ੒ͷΞΠςϜΛ ͋ͱͭ࡞੒͠Α͏ɻ ίϐϖͯ͠ɺίϯςϯπͷΈΛ ࠩ͠ସ͑Δͱ଎͘Ͱ͖Δɻ
  5. ശΛ૿΍͢ λΠΨʔΤοά <div class="item"> <div class="item-image"> <img src="*****1.png" alt=""> </div>

    <div class="item-text"> λΠΨʔΤοά </div> </div> )5.-Ͱද͢ Ϩουϋοτ <div class="item"> <div class="item-image"> <img src="*****2.png" alt=""> </div> <div class="item-text"> Ϩουϋοτ </div> </div> ίϐϖͯ͠ίϯςϯπΛࠩ͠ସ͑
  6. ശΛԣʹฒ΂Δ λΠΨʔΤοά <div class="item"> <div class="item-image"> <img src="*****1.png" alt=""> </div>

    <div class="item-text"> λΠΨʔΤοά </div> </div> <div class="item"> <div class="item-image"> <img src="*****2.png" alt=""> </div> <div class="item-text"> Ϩουϋοτ </div> </div> )5.-Ͱ ελΠϦϯάͷ४උ Ϩουϋοτ <div class="items"> </div> ฒ΂͍ͨ΋ͷΛେ͖ͳശʹೖΕΔ ऴྃλάΛ๨Εͳ͍Α͏ʹ͠Α͏ େശͷ໊લΛ෇͚Δɻ DPOUBJOFS΍ XSBQQFSͰ΋ྑ͍ɻ
  7. ശΛԣʹฒ΂Δ $44ͰϨΠΞ΢τ λΠΨʔΤοά Ϩουϋοτ .items { display: flex; } Ұ൪֎ͷେശʹରͯ͠

    DMBTT໊΁ͷࢦࣔʹ͸ ಄ʹυοτΛ෇͚Δɻ ʮத਎Λԣʹฒ΂ͯʯͱࢦࣔ df tab ԣʹฒΜͩʂ
  8. <div class="item"> <div class="item-image"> <img src="*****1.png" alt=""> </div> <div class="item-text">

    λΠΨʔΤοά </div> </div> <div class="item"> <div class="item-image"> <img src="*****2.png" alt=""> </div> <div class="item-text"> Ϩουϋοτ </div> </div> <div class="items"> </div> λΠΨʔΤοά Ϩουϋοτ w ରԠؔ܎Λཧղ͠Α͏ɻ w ߏ଄Λݟ΍͘͢͢ΔͨΊɺ)5.-ʹ͸൒֯εϖʔεͰΠϯσϯτΛೖΕΑ͏ɻ ਤͱ ίʔυͷ ରԠؔ܎
  9. ల։લ ల։ޙ ԣʹฒ΂Δ df display : flex ંΓฦ͢ fxww flex-wrap

    : wrap; ௨ৗɺ͜ͷͭΛηοτͰࢦఆ͠·͢ɻ ͜ͷࢦఆΛ͢Δͷ͸ɺฒ΂͍ͨ΋ͷͰ͸ͳ͘ɺฒ΂͍ͨ΋ͷͷʮ਌ʯͰ͋Δ͜ͱʹ஫ҙ͠Α͏ɻ ઃఆํ๏ ശΛԣʹฒ΂Δ