ホームへ

display:flexの親要素と子要素の関係

2022年04月22日

display:flexといえば横並びに使うCSSです。

しかし、よく知らずに使うとうまく効きません。

display:flexの親要素と子要素の関係を解説します。

display:flexは親、横に並ぶのは子

display:flexは横並べしたい要素の親要素に指定しましょう。

display:flexを指定した要素の子要素が横並びします。

子要素
子要素
<style>
.example{
    /*親要素に指定*/display: flex;
    border: 1px solid #333;
    background: #d5edff;
    padding: 10px;
}
.example div{
    border: 1px solid #333;
    background: #fff;
    padding: 10px;
}
</style>

<div class="example">
    <div>子要素</div>
    <div>子要素</div>
</div>

孫要素には効かない

display:flexは子要素を横並びしますが、孫要素以降には影響ありません。

子要素
孫要素
孫要素

html(CSSは同じ)

<div class="example">
    <div>子要素</div>
    <div>
        <div>孫要素</div>
        <div>孫要素</div>
    </div>
</div>

孫要素も横並びしたい、というときは子要素にもdisplay:flexを指定しましょう。

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

↑「副業してもう少し稼ぎたい!」というかたのために副業の方法も解説しています。

親要素に指定するCSS

親要素に指定するCSS、つまりdisplay:flexとセットで指定するCSSは下記のとおりです。

justify-content

justify-contentは水平方向・横方向の位置調整をするCSSです。

align-items

align-itemsは垂直方向・縦方向の位置調整をするCSSです。

flex-wrap

flex-wrapは折り返しするかしないかを指定するCSSです。

flex-direction

flex-directionは並ぶ順・方向を指定するCSSです。

子要素に指定するCSS

display:flexを指定した子要素に指定するCSSは下記のとおりです。

order

orderは並び順を任意に指定するCSSです。

【まとめ】display:flexの親要素と子要素の関係

親要素:「display:flex」を指定

子要素:横に並ぶ

親要素に指定するCSS

  • justify-content
  • align-items
  • flex-wrap
  • flex-direction

子要素に指定するCSS

  • order

以上、display:flexの親要素と子要素の関係でした。

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。

CSSやhtmlをマンガで学ぶ