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

Flexboxを学ぼう - HTML/CSS入門

Flexboxを学ぼう - HTML/CSS入門

HTMLは基本的に、上から下に要素が並んでいくため、図のように横に要素を並べるというのは意外と苦手です。

そこで、CSSを使ってレイアウトを整えていくのですが、近年よく使われているのがフレキシブルレイアウト(Flexbox)という手法です。Microsoft Internet Explorer(IE)が未対応などの理由で、なかなか使えないケースが多かったですが、IEのシェア低下に伴い、現在では積極的に利用されています。

この記事では、そんなFlexboxに関する各プロパティをそれぞれ紹介していきましょう。

記事はこちら
https://tomosta.jp/html5-css3-2021/flex-box-guide/

YouTube動画はこちら
https://www.youtube.com/watch?v=gGiUqpRpsAg

ともすた
https://tomosta.jp

Transcript

  1. )5.-$44ೖ໳ 'MFYCPYΛֶ΅͏

  2. 'MFYCPYʢϑϨΩγϒϧϘοΫεϨΠΞ΢τʣ      ௨ৗʢbox / inlineʣ 

       Flexbox
  3. ओͳEJTQMBZϓϩύςΟ ϓϩύςΟ ղઆ inline ཁૉͷ෯͚ͩར༻ block / inline-block ༨നͳͲΛௐ੔Ͱ͖Δ f

    lex / inline- f lex ϑϨΩγϒϧϘοΫεϨΠΞ΢τ grid / inline-grid CSS Grid table / inline-table දϨΠΞ΢τ div { display: flex; }
  4. ޲͖ͷࢦఆGMFYEJSFDUJPO    row    column row-reverse

    column-reverse      
  5. Ґஔἧ͑ʢਫฏʣKVTUJGZDPOUFOU    flex-start    center 

      flex-end    space-between    space-around    space-evenly
  6. Ґஔἧ͑ʢਨ௚ʣBMJHOJUFNT    stretch    baseline 

      flex-start center flex-end      
  7. ંΓฦ͠ͷࢦఆGMFYXSBQ    nowrap wrap wrap-reverse   

               
  8. Ґஔἧ͑ʢෳ਺ߦͰͷਨ௚ʣBMJHODPOUFOU    stretch flex-start space-between space-around space-evenly 

                  center          flex-end                                    
  9. ݸผͷॎҐஔͷࢦఆBMJHOTFMG    auto / stretch   

    baseline    flex-start    center    flex-end
  10. ҐஔͷมߋPSEFS    .box:nth-child(1) { order: 2; } .box:nth-child(2)

    { order: 1; } .box:nth-child(3) { order: 3; }
  11. ϕʔεͷ෯GMFYCBTJT    .box { flex-basis: 100px; } .box:nth-child(2)

    { flex-basis: auto; }
  12. ෯͕৳ͼΔׂ߹ͷࢦఆGMFYHSPX    .box:nth-child(1) { flex-grow: 2; }

  13. ෯͕ॖΉׂ߹ͷࢦఆGMFYTISJOL    .box:nth-child(1) { flex-shrink: 2; } .box:nth-child(3)

    { width: 100px; }
  14. γϣʔτϋϯυϓϩύςΟGMFY .box1 { flex-grow: 1; flex-shrink: 1; flex-basis: 100px; }

    .box1 { flex: 1 1 100px; }
  15. γϣʔτϋϯυϓϩύςΟGMFYGMPX .content { flex-direction: row; flex-wrap: wrap; } .content {

    flex-flow: row wrap; }
  16. ͱ΋ͨ͢ ݕࡧ