Flexboxの使い方まとめ

FlexboxはCSS3から使用できる新しいCSSです。

フレキシブルで簡単にレイアウトが今までより少ないコードで、

実装することができます。

Flexboxの書き方

FlexboxのHTML

複数の要素をboxで囲います。

<div class="box">
<div class="menu01">子要素01</div>
<div class="menu02">子要素02</div>
<div class="menu03">子要素03</div>
<div class="menu04">子要素04</div>
</div>

FlexboxのCSS

まず、boxにFlexコンテナーを定義

.box {
   display: -webkit-flex;
   display: flex;
}

インライン要素の場合

.box {
   -webkit-flex-direction: row;
   flex-direction: row;
}

Flexboxコンテナーに指定するプロパティ

flex-direction

子要素をどの方向に配置していくかを指定するプロパティー。

.box {
   -webkit-flex-direction: row;
   flex-direction: row;
}

使える値

flex-wrap

子要素を一行、または複数行に並べるかを指定します。

.box {
   -webkit-flex-wrap: nowrap;
   flex-wrap: nowrap;
}

使える値

flex-flow

flex-directionとflex-wrapをまとめて指定できるプロパティです。

.box {
   -webkit-flex-flow: row nowrap;
   flex-flow: row nowrap;
}

justify-content

flexコンテナーに空きスペースがあった場合、水平方向のどの位置に配置するかを指定します。

.box {
   justify-content: flex-start;
}

使える値

align-items

flexコンテナーに空きスペースがあった場合、垂直方向のどの位置に配置するかを指定します。

.box {
   align-items: stretch;
}

使える値

align-content

子要素が複数行に渡った場合の垂直方向の揃えを指定します。

.box {
   align-content:stretch;
}

使える値

子要素に指定するプロパティ

order

子要素を任意の順で並べ替えられます。

.menu01 {order: 2; }
.menu02 {order: 1; }
.menu03 {order: 4; }
.menu04 {order: 3; }

flex-grow

親要素にスペースがある場合、子要素が他の子要素に対してどれくらい伸びるかを指定します。

.menu02 {flex-grow: 5; }

flex-shrink

flex-growと逆で、親要素にスペースがなく子要素が入り切らない場合、指定のある子要素が他の子要素に対してどれくらい縮むかを指定します。

.menu02 {flex-shrink: 5; }

flex-basis

widthと同じように幅の値を指定できます。autoと指定した場合は子要素のコンテンツのサイズが適応されます。

.menu02 {flex-basis: 200px; }

flex

flex-grow、flex-shrink、flex-basis の3つのプロパティーを一行で指定できます。

初期値は 0（flex-grow） 1（flex-shrink） auto（flex-basis）です。

.menu02 {flex: 0 5 200px; }

align-self

親要素に高さにスペースがある場合、子要素を垂直方向のどの位置に配置するかを指定します。
flexコンテナに指定するalign-itemsと同じ機能ですが、こちらに指定がある場合は、align-itemsよりも優先されます。

.menu01 {align-self: auto;}

使える値

まとめ

私はグローバルナビゲーションで使ったりします。

Flexboxってとっても便利だなと思うのですが、

LPのコーディングを見てると

意外とfloatを使っていることが多いんですよ。

LPのコーディングでFlexbox使っているのが見つかったら、

ご紹介したいと思います。