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

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

【パターン1】子要素2つ

<div class='parent'>
<div class='child'>1子供</div>
<div class='child'>2子供</div>
</div>

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

 

 

 

【パターン1】子要素4つ

<div class='parent'> 
    <div class='child'>1子供</div> 
    <div class='child'>2子供</div> 
    <div class='child'>3子供</div> 
    <div class='child'>4子供</div> 
</div> 

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

 

 

【パターン1】子要素4つ + 孫要素(?)2つ組み合わせ

<div class='parent'> 
        <div class='child'>1子供
            <div class='grandchild'>1孫</div>
                  <div class='grandchild'>2孫</div>
        </div> 
        <div class='child'>2子供</div> 
        <div class='child'>3子供
            <div class='grandchild'>1孫</div>
                  <div class='grandchild'>2孫</div>
        </div> 
        <div class='child'>4子供</div> 
    </div> 
    <style> 
    .parent{
         display:flex; 
    } 
    </style> 

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

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

 

最終学歴高卒。実務未経験から自社開発&受託開発をしている企業に入社した、入社1年目のエンジニア。20代前半。
WordPress・PHP / Laravel・JavaScript

ひろきをフォローする

コメント

タイトルとURLをコピーしました