CSS Flexible Boxが便利すぎて色々と使っているが活用しきれてない

CSSflex, flexible

DIVでレイアウトを整えるのは結構大変ですね。

どこかをいじれば、どこかではみ出てしまったり、小さくなりすぎたり。。

CSS3のレイアウトモジュール、FlexBoxを使えばそんな手間もかなり減らすことができます。といってもすべてのレイアウトで万能に使えるわけではないのでケースバイケースです。

ですが、汎用性はかなり高く、便利すぎて頻繁に使用するようになってます。

しかし、Flexで使用するプロパティが色々とあり、なかなか活用しきれていないので勉強と備忘録をかねて記事作成

CSS Flexible Boxとは

In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated.

http://www.w3.org/TR/css-flexbox-1/

フレックスレイアウトモデルでは子要素はどのような方向にでもレイアウト可能。そして未使用スペースを埋めるために拡大、または親要素からはみ出ないように伸縮できます。水平・垂直どちらの方向の配置にも簡単に対応できます。

要するにこれを使うことにより、フレキシブルに要素の配置が可能になるということです。

Flexible Boxを使用する

使い方は簡単です。

親要素に以下のCSSを設定するだけです。(付随するプロパティは後述します。)

<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>

このように表示されます。

デフォルトでは左揃いで横並びになります。

勝手に横並びになってくれるのでこれだけでも便利ですが、このままだと自動的に折り返してくれません。

色々と使えるプロパティがありますのでうまく組み合わせてレスポンシブルに対応したレイアウトを作ります。

Flexible Box のプロパティ

flex-direction

子要素の並ぶ方向を指定します。以下の値が利用可能です。

内容
rowインライン要素と同じように並びます。
左→右方向に子要素が配置されます。
※デフォルト値
row-reverse インライン要素と同じように並びますが、方向が逆になります。
右→左方向に子要素が配置されます。
columnブロック要素と同じように並びます。
上→下方向に子要素が配置されます。
column-reverse ブロック要素と同じように並びますが、方向が逆になります。
下→上方向に子要素が配置されます。

flex-wrap

折り返しを設定するプロパティです。

これを使用することにより、ようやくレスポンシブ対応っぽくなります。

内容
nowrap折り返さない
※デフォルト値
wrap折り返す
wrap-reverse逆方向に折り返す

flex-flow

前述の flex-direction flex-wrap を一括で設定できるプロパティです。flex-flow: flex-direction flex-wrap; のように記述します。

例)

.parent {
flex-flow: column wrap;
/*子要素を左から右に配置して折り返す*/
}

order

あまり使用することはなさそうですが、念のため。

order プロパティは子要素の順番を変更できます。

通常、htmlの記載順で配置されますが、このプロパティを使用することにより順番を入れ替えられます。

値には数値を入力します。(デフォルト値は0)

例)html記述順: 1234 から 3214に変更

<div class="parent">
<div class="child">#1</div>
<div class="child order2">#2</div>
<div class="child order1">#3</div>
<div class="child">#4</div>
</div>

<style>
.parent {
display : flex;
}
.parent > .order1 {
order: -2;
}
.parent > .order2 {
order: -1;
}
</style>

このようにorderプロパティの数値の小さい順で並び替えできます。

注意:このプロパティは表示順を変更するだけで実際の記述順は変更されません。CSSが動作しない環境下では問題が発生する可能性があります。

flex-grow

親要素のに対して子要素のならびに空きがある場合、子要素の幅をどれだけ伸ばすかを指定するプロパティです。

値には0以上の数値を指定します。

全ての数値が同じ場合、均等に並びます。

例)1、3番目の子要素に1、2番目の子要素に3を設定した場合

<div class="parent">
<div class="child1">#1</div>
<div class="child2">#2</div>
<div class="child3">#3</div>
</div>

<style>
.parent {
display : flex;
}
.child1 {
flex-grow:1;
}
.child2 {
flex-grow:3;
}
.child3 {
flex-grow:1;
}
</style>

上記のように2番目の子要素が大きく表示されています。

flex-shrink

flex-growと真逆のプロパティです。

デフォルト値は1となります。

<div class="parent">
<div class="child1">#1</div>
<div class="child2">#2</div>
<div class="child3">#3</div>
</div>

<style>
.parent {
display : flex;
}
.child1 {
flex-shrink:2;
}
.child2 {
flex-shrink:3;
}
.child3 {
flex-shrink:1;
}
</style>

flex-basis

子要素の幅を指定します。

デフォルト値はauto

<div class="parent">
<div class="child1">50px</div>
<div class="child2">100px</div>
<div class="child3">10%</div>
</div>

<style>
.parent {
display : flex;
}
.child1 {
flex-basis:50px;
}
.child2 {
flex-basis:100px;
}
.child3 {
flex-basis:75px;
}
</style>

justify-content

子要素の水平の配置を指定するプロパティです。

内容
flex-start行の開始位置(左端)から順に並びます。(左寄せ)
デフォルト値
flex-end行の終了位置(右端)から順に並びます。(右寄せ)
center中央揃い
space-between最初と最後の子要素はそれぞれ左端、右端に配置され間の要素はその間に均等に配置されます。
space-around均等に配置されます。

align-items

子要素の垂直の配置を指定するプロパティです。

内容
flex-start上揃え
flex-end下揃え
center中央揃え
baselineベースラインに揃えるようですが、よく分かりません。
詳細はこちらを参照してください。
stretch一番高さのある要素にその他の要素の高さを合わせます。
※全ての子要素が同じ高さになります。

align-content

子要素が複数行になった場合の配置を指定するプロパティです。

※ flex-wrap に nowrap 以外が指定されている必要があります。

内容
flex-start親要素の開始位置から配置。
※上揃え
flex-end親要素の終了位置から配置
※下揃え
center中央に配置
space-between 最初と最後の子要素をそれぞれ開始位置、終了位置に配置。その他の子要素をその間に均等配置
space-around均等に配置します。
stretch 親要素の高さに合わせて子要素を配置
※デフォルト値

まとめ

コピペに便利なようにまとめるとこんなところでしょうか。

.parent {
display:flex;
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow: flex-direction flex-wrap;
justify-content: flex-start | flex-end | center | space-between | space-around;
align-items: flex-start | flex-end | center | baseline | stretch;
align-content: flex-start | flex-end | center| space-between | space-around | stretch;
}
.child {
order: int;
flex-grow: int;
flex-shrink: int;
flex-basis: int;
}

CSSflex, flexible