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

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

親要素に指定する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の親要素と子要素の関係でした。