【CSS】横並びの手法！flex（フレックス）のプロパティ一覧～コピペ用～

とりとん

flexboxのプロパティめっちゃある！

最近HP作成の依頼でかなりflexを多用する機会があったので、備忘録として。

これは要素を横並びにするとても便利で主流な手法なので今更ですが、誰かの参考になれば幸いです。

flexコンテナとflexアイテム

基本的な使い方としては、横並びにしたい子要素を親要素のdivで囲み、cssで親要素に「display: flex;」記述するだけでOKです！

DEMO

<div class="parent">
    <div class="child_1">1</div>
    <div class="child_2">2</div>
    <div class="child_3">3</div>
    <div class="child_4">4</div>
    <div class="child_5">5</div>
</div>

.parent{
    display: flex;
    width: 300px;
    height: 150px;
    background-color: #f5deb3;
}

.child_1,.child_2,.child_3,.child_4,.child_5{
    font-size: 30px;
    padding: 2px 3px;
    margin: 10px;
    color: #ffffff;
    border: double 5px #B8860B;
    background-color: #DEB887;
}

親要素：flexコンテナのプロパティ

親要素に記述することで子要素の位置を指定することができるプロパティをまとめてみました！

flex-direction：子要素の並び順

row(初期値)

左から並べる

column

上から並べる

row-reverse

右から並べる

column-reverse

下から並べる

row（初期値）のコードを見る

See the Pen JjRBapw by とりとん (@darakerutoriton) on CodePen.

column（縦並び）のコードを見る

See the Pen flex-direction : column; by とりとん (@darakerutoriton) on CodePen.

row-reverse（逆順）のコードを見る

See the Pen flex-direction : row-reverse; by とりとん (@darakerutoriton) on CodePen.

column-reverse（縦並び逆順）を見る

See the Pen flex-direction : column-reverse; by とりとん (@darakerutoriton) on CodePen.

flex-wrap：子要素の折り返し

nowrap(初期値)

親要素に関係なく1行に並べる

wrap

親要素に合わせて下へ折り返す

wrap-reverse

親要素に合わせて上へ折り返す

nowrap（親領域を無視）のコードを見る

See the Pen flex-wrap: no-wrap; by とりとん (@darakerutoriton) on CodePen.

wrap（親領域内で折り返し）のコードを見る

See the Pen flex-wrap: wrap; by とりとん (@darakerutoriton) on CodePen.

wrap-reverse（逆順）のコードを見る

See the Pen YzGjJqq by とりとん (@darakerutoriton) on CodePen.

■ flex-flow

justify-content：子要素の横位置

flex-start(初期値)

左寄せ

flex-end

右寄せ

center

中央寄せ

space-between

子要素の横幅に均等の余白

space-around

均等の余白+端に半分の余白

flex-start（左寄せ）のコードを見る

See the Pen justify-content: flex-start; by とりとん (@darakerutoriton) on CodePen.

flex-end（右寄せ）のコードを見る

See the Pen justify-content: flex-end; by とりとん (@darakerutoriton) on CodePen.

center（中央よせ）のコードを見る

See the Pen justify-content: center; by とりとん (@darakerutoriton) on CodePen.

space-between（子要素間が等間隔）のコードを見る

See the Pen justify-content: space-between; by とりとん (@darakerutoriton) on CodePen.

space-around（子要素周りに同じ余白）のコードを見る

See the Pen justify-content: space-around; by とりとん (@darakerutoriton) on CodePen.

align-items：子要素の縦位置

flex-start

上寄せ

flex-end

下寄せ

center

中央寄せ

stretch(初期値)

親要素の縦幅に合わせる

baseline

テキストの下線に揃える

flex-start（上寄せ）のコードを見る

See the Pen align-items: flex-start; by とりとん (@darakerutoriton) on CodePen.

flex-end（下寄せ）のコードを見る

See the Pen align-items: flex-end; by とりとん (@darakerutoriton) on CodePen.

center（中央寄せ）のコードを見る

See the Pen align-items: center; by とりとん (@darakerutoriton) on CodePen.

stretch(初期値)のコードを見る

See the Pen align-items: stretch; by とりとん (@darakerutoriton) on CodePen.

baseline（テキストの下寄せ）のコードを見る

See the Pen align-items: baseline; by とりとん (@darakerutoriton) on CodePen.

align-content：複数行の縦位置

flex-start

上寄せ

flex-end

下寄せ

center

中央寄せ

space-between

子要素の縦幅に均等の余白

space-around

均等の余白+端に半分の余白

flex-start（上寄せ）のコードを見る

See the Pen align-content: flex-start; by とりとん (@darakerutoriton) on CodePen.

flex-end（下寄せ）のコードを見る

See the Pen align-content: flex-end; by とりとん (@darakerutoriton) on CodePen.

center（中央寄せ）のコードを見る

See the Pen align-content: center; by とりとん (@darakerutoriton) on CodePen.

space-between（子要素間に同じ余白）のコードを見る

See the Pen align-content: space-between; by とりとん (@darakerutoriton) on CodePen.

space-around（子要素周りに同じ余白）のコードを見る

See the Pen align-content: space-around; by とりとん (@darakerutoriton) on CodePen.

子要素：flexアイテムのプロパティ

子要素に記述することで、個別に位置を指定することができるプロパティをまとめてみました！

order：子要素の順番

子要素に数字を指定し、小さい順番に並び替える

order（子要素の順番変更）のコードを見る

See the Pen flex_order by とりとん (@darakerutoriton) on CodePen.

flex-grow：子要素の伸び率

親要素の横幅の余白を比率で分けて子要素を伸ばす

flex-grow（子要素の幅を倍率設定）のコードを見る

See the Pen flex_flex-grow by とりとん (@darakerutoriton) on CodePen.

flex-shrink：子要素の縮み率

親要素に入りきれなかった横幅を比率で分けて子要素を縮める

flex-shrink（子要素を比率で縮める）のコードを見る

See the Pen flex_flex-shrink by とりとん (@darakerutoriton) on CodePen.

flex-growとflex-shrinkの計算方法はこちら⬇️

【CSS】伸縮プロパティflex-growとflex-shrinkの計算方法

横並びにするレイアウト手法として便利な”flexbox” flexbox使い方のまとめはこちらの記事を参考にしてみてください⬇️ flexboxには様々なプロパ...

toriton.link

flex-basis：子要素の横幅

flex-basis（子要素の横幅設定）のコードを見る

See the Pen flex_flex-basis by とりとん (@darakerutoriton) on CodePen.

widhtと同じように子要素に数値を指定する

■ flex

align-self：子要素個別の縦位置

これはあまり使用する機会は無いかもですが、興味があれば！

flex-start

上寄せ

flex-end

下寄せ

center

中央寄せ

auto(初期値)

親要素の縦幅に合わせる

stretch

親要素の縦幅に合わせる

baseline

テキストの下線に揃える

flex-start（特定の子要素を上寄せ）のコードを見る

See the Pen flex-start by とりとん (@darakerutoriton) on CodePen.

flex-end（特定の子要素を下寄せ）のコードを見る

See the Pen flex-end by とりとん (@darakerutoriton) on CodePen.

center（特定の子要素を中央寄せ）のコードを見る

See the Pen center by とりとん (@darakerutoriton) on CodePen.

stretch（特定の子要素を親要素の縦幅に合わせる）のコードを見る

See the Pen stretch by とりとん (@darakerutoriton) on CodePen.

baseline（特定の子要素をテキスト下に合わせる）のコードを見る

See the Pen baseline by とりとん (@darakerutoriton) on CodePen.

とりとん

最後まで読んでいただきありがとうございました！

＼ ぽちっと応援お願いします♪ ／