【HTML・CSS】display:flex;をめちゃくちゃ簡単に分かりやすく解説

display:flex;は親要素につけます。今回はparentクラスにdisplay:flex;を付けており、その要素の中にある子要素の数が増えるほど横並びになる子の数も増えます。

【パターン１】子要素２つ

<div class='parent'>
<div class='child'>１子供</div>
<div class='child'>２子供</div>
</div>

<style>
.parent{
    display:flex;
}
</style>

　

　

　

【パターン１】子要素４つ

<div class='parent'> 
    <div class='child'>１子供</div> 
    <div class='child'>２子供</div> 
    <div class='child'>3子供</div> 
    <div class='child'>4子供</div> 
</div> 

<style> 
.parent{
     display:flex; 
} 
</style> 

　

　

【パターン１】子要素４つ ＋ 孫要素(?)２つ組み合わせ

<div class='parent'> 
        <div class='child'>１子供
            <div class='grandchild'>１孫</div>
                  <div class='grandchild'>２孫</div>
        </div> 
        <div class='child'>２子供</div> 
        <div class='child'>３子供
            <div class='grandchild'>１孫</div>
                  <div class='grandchild'>２孫</div>
        </div> 
        <div class='child'>４子供</div> 
    </div> 
    <style> 
    .parent{
         display:flex; 
    } 
    </style>　

孫は親要素のdisplay:flex;の影響を受けません。以上！！

少しでもこの記事がお役に立てたら幸いです。