【CSS】display:flexで上寄せ・下寄せする方法

「flexで横並べしたら全部同じ高さになった！上寄せしたい！」

display:flexで上寄せ・上下中央寄せ・下寄せする方法を解説します。

通常（何もしない状態）

flexを指定すると下記のように子要素の高さが親要素に合わせて最大まで伸びます。

<style>
.example{
    display: flex;
    border: 1px solid #999;
    padding: 5px;
    background: #daf0f2;
    height: 200px;
}
.example>div{
    border: 1px solid #999;
    padding: 5px;
    margin: 5px;
    background: #FFF;
}
</style>
<div class="example">
    <div>テキスト<br>テキスト<br>テキスト</div>
    <div>テキスト<br>テキスト</div>
    <div>テキスト</div>
</div>

flexとセットで使うCSSに「align-items」があります。

これは縦の位置を指定するCSSです。

これの初期値は「align-items: normal」であり、「align-items: stretch」と同じ特徴を持ちます。

stretchでは子要素の高さが親要素に合わせて最大まで伸びます。

align-itemsの値を変更することでこの状態を変更することができます。

上寄せ　align-items:flex-start

上寄せするには「align-items: flex-start」を指定します。

<style>
.example2{
    display: flex;
    /*コレ*/align-items: flex-start;
    border: 1px solid #999;
    padding: 5px;
    background: #daf0f2;
    height: 200px;
}
.example2>div{
    border: 1px solid #999;
    padding: 5px;
    margin: 5px;
    background: #FFF;
}
</style>
<div class="example2">
    <div>テキスト<br>テキスト<br>テキスト</div>
    <div>テキスト<br>テキスト</div>
    <div>テキスト</div>
</div>

上下中央寄せ　align-items:center

上下中央寄せするには「align-items: center」を指定します。

<style>
.example4{
    display: flex;
    /*コレ*/align-items: center;
    border: 1px solid #999;
    padding: 5px;
    background: #daf0f2;
    height: 200px;
}
.example4>div{
    border: 1px solid #999;
    padding: 5px;
    margin: 5px;
    background: #FFF;
}
</style>
<div class="example4">
    <div>テキスト<br>テキスト<br>テキスト</div>
    <div>テキスト<br>テキスト</div>
    <div>テキスト</div>
</div>

下寄せ　align-items:flex-end

下寄せするには「align-items: flex-end」を指定します。

<style>
.example3{
    display: flex;
    /*コレ*/align-items: flex-end;
    border: 1px solid #999;
    padding: 5px;
    background: #daf0f2;
    height: 200px;
}
.example3>div{
    border: 1px solid #999;
    padding: 5px;
    margin: 5px;
    background: #FFF;
}
</style>
<div class="example3">
    <div>テキスト<br>テキスト<br>テキスト</div>
    <div>テキスト<br>テキスト</div>
    <div>テキスト</div>
</div>

【まとめ】flexで上寄せ・上下中央寄せ・下寄せする方法

• 上寄せ　align-items:flex-start
• 上下中央寄せ　align-items:center
• 下寄せ　align-items:flex-end

以上、display:flexで上寄せ・上下中央寄せ・下寄せする方法でした。