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. ͱ΋ͨ͢ ݕࡧ