Flexboxというのはボックスの配置を簡単に設定するための新しいレイアウト機能です。ここでは、Flexboxの使い方についてお話していきます。Flexboxを初めて知った方にとっては、少しとっつきにくさを感じる部分もあるかもしれませんがとても便利なプロパティですので、ぜひ一読してみてください。
コンテンツ
flexbox関連プロパティ一覧
はじめに、flexboxに関わるプロパティの一覧表を載せておきます。はじめてflexboxに触れる方はここは飛ばしていただいて構いません。
flexboxコンテナをセレクタにするプロパティ一覧
| プロパティ（説明） | 値 | flexアイテムの配置 |
|---|---|---|
| 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の値; | |
| justify-content（ヨコの配置） | flex-start | 左寄せ |
| flex-end | 右寄せ | |
| center | 中央寄せ | |
| space-between | 均等割り付け | |
| space-around | 等間隔の余白 | |
| align-items （タテの配置） |
stretch | 隙間なく配置 |
| flex-start | 上寄せ | |
| flex-end | 下寄せ | |
| center | 中央寄せ | |
| baseline | ベースライン揃え | |
| align-content （行の配置） |
stretch | 隙間なく配置 |
| flex-start | 上寄せ | |
| flex-end | 下寄せ | |
| flex-center | 中央寄せ | |
| space-between | 均等割り付け | |
| space-around | 等間隔の余白 | |
flexアイテムをセレクタにするプロパティ一覧
| プロパティ （説明） |
値 | flexアイテムの配置 |
|---|---|---|
| order （順番） |
数値 | 数値が小さい順に並ぶ |
| flex-grow （幅の比率） |
数値 | 数値が大きいほど比率が大きくなる |
| flex-shrink （幅の縮まり度） |
数値 | 数値が大きいほど幅が縮まる |
| flex-basis （横幅） |
数値 | widthと同じように指定 |
| flex （flex-grow + flex-shrink + flex-basis) |
flex: flex-growの値 flex-shrinkの値 flex-basisの値 | |
| align-self （タテの配置） |
auto | 親要素のalign-itemsの値に従う |
| flex-start | 上寄せ | |
| flex-end | 下寄せ | |
| center | 中央寄せ | |
| baseline | ベースライン？ | |
| stretch | 隙間なく配置 | |
flexboxコンテナとflexアイテム
「flexboxコンテナ」とか「flexアイテム」とか、いきなり良く分からない単語から始まってしまいましたが、そんなに難しい話ではありません。Flexboxでは考え方として「Flexboxコンテナ」と呼ばれる親要素の中に「flexアイテム」と呼ばれる子要素があり、その子要素に対してさまざまな整列が指定できるようになっています。
少しややこしく感じるかもしれませんが、初期設定として必要なのは、flexboxコンテナ（つまり、整列させたい要素の親要素）に対してdisplay:flex;を指定するだけです。この設定をするとdisplay:flex;を指定された親要素がflexboxコンテナとなり、その子要素はflexアイテムとして扱われます。
ボタンで表示を切り替えてご覧ください。
See the Pen flexbox by kenichi (@ken81) on CodePen.
上記はただdisplay:flex;を指定しただけの状態です。これだけでは何も変化はありません。
CSS
.container{
display:flex;
}
display:flex;はブロック要素と同じようにflexboxコンテナの前後に改行が入ります。もしも、flexboxコンテナをインライン要素のように扱いたい場合は、display:inline-flex;を指定します。それでは、flexboxコンテナにいろんなプロパティを適用させてflexアイテムを整列させてみましょう。
flexアイテムを配置する「方向」を決めるflex-directionプロパティ
flex-directionプロパティは、flexアイテムを横に並べたり、タテに並べたりするプロパティです。
左から右へ配置するrow【初期値】
See the Pen flexbox-row by kenichi (@ken81) on CodePen.
flex-direction:row;を指定するとflexアイテムが左から右へ配置されます。これは初期設定なので見た目は変わりません。
右から左へ配置するrow-reverse
See the Pen flexbox-row-reverse by kenichi (@ken81) on CodePen.
flex-direction:row-reverse;はflexアイテムを右から左へ配置させます。
上から下へタテに配置するcolumn
See the Pen flexbox-column by kenichi (@ken81) on CodePen.
flex-direction:column;はflexアイテムを上から下へタテに配置させます。
下から上へタテに配置するcolumn-reverse
See the Pen flexbox-column-reverse by kenichi (@ken81) on CodePen.
flex-direction:column-reverse;はflexアイテムを下から上へタテに配置させます。
改行の有無と方向を設定するflex-wrapプロパティ
flex-wrapプロパティは改行するのかしないのかを指定するプロパティです。
改行せずにflexアイテムを詰めるnowrap【初期値】
See the Pen flexbox-row-nowrap by kenichi (@ken81) on CodePen.
flex-wrap:nowrap;を指定するとflexアイテムは改行されずに幅が縮んでいきます。
flexアイテムを改行させるwrap
See the Pen flexbox-row-wrap by kenichi (@ken81) on CodePen.
flex-wrap:wrap;を指定した場合、親要素の幅を超えた分が改行されていきます。
flexアイテムを下から上に改行させるwrap-reverse
See the Pen flexbox-row-wrap-reverse by kenichi (@ken81) on CodePen.
flex-wrap:wrap-reverse;は、改行される方向が上から下ではなく、下から上に改行されます。
「flex-direction」と「flex-wrap」が同時に設定できるflex-flowプロパティ
flex-flowプロパティは、上で見てきた２つのプロパティをショートハンドできるプロパティです。
flex-flow: flex-directionの値 flex-wrapの値;
という形で指定します。
例えば、
CSS
.conatiner{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
上記のflex-directionとflex-wrapをまとめてflex-flowプロパティで設定すると次のようになります。
CSS
.conatiner{
display: flex;
flex-flow: row nowrap;
}
右寄せ・左寄せ・間隔などが指定できるjustify-contentプロパティ
justify-contentプロパティは横方向の寄せやflexアイテム同士の間隔の設定ができるプロパティです。
flexアイテムを左寄せするflex-start【初期値】
See the Pen flexbox-justify-content-flex-start by kenichi (@ken81) on CodePen.
これは初期値なので見た目は変わり映えありませんが、左に寄せる設定です。
flexアイテムを右寄せするflex-end
See the Pen flexbox-justify-content-flex-end by kenichi (@ken81) on CodePen.
flexアイテムが右寄せになりました。
flexアイテムを中央寄せするcenter
See the Pen flexbox-justify-content-center by kenichi (@ken81) on CodePen.
flexアイテムが中央寄せになりました。
flexアイテムが等間隔でめいっぱい広がるspace-between
See the Pen flexbox-justify-content-space-between by kenichi (@ken81) on CodePen.
最初と最後のflexアイテムが両端に寄り、中間のアイテムが等間隔に配置されます。
flexアイテムも余白もすべて等間隔に配置するspace-around
See the Pen flexbox-justify-content-space-around by kenichi (@ken81) on CodePen.
space-betweenに似ていますが、こちらは均等な余白が両端にも入ります。
タテの高さや位置を指定するalign-itemsプロパティ
align-itemsプロパティはタテの位置をそろえる基準や高さを指定するプロパティです。※下記のサンプルはプロパティの性質が視覚的に分かりやすくなるよう、それぞれのflexアイテムの高さを変えてあります。
flexコンテナの高さいっぱいにflexアイテムを広げるstretch【初期値】
See the Pen flexbox-align-items-stretch by kenichi (@ken81) on CodePen.
align-items:stretch;を指定するとflexコンテナに指定された高さいっぱいにflexアイテムが広がります。
上にそろえるflex-start
See the Pen flexbox-align-items-flex-start by kenichi (@ken81) on CodePen.
下にそろえるflex-end
See the Pen flexbox-align-items-flex-end by kenichi (@ken81) on CodePen.
タテに中央寄せするcenter
See the Pen flexbox-center by kenichi (@ken81) on CodePen.
文字のベースラインに合わせるbaseline
See the Pen flexbox-baseline by kenichi (@ken81) on CodePen.
複数行のタテの配置を指定するalign-contentプロパティ
このプロパティはflexアイテムが改行されたときにどのように改行の間隔を空けるかを指定するプロパティです。このプロパティは、flexアイテムが改行されないと反映されないプロパティですので気をつけてください。
flexアイテムを隙間なく配置するstretch【初期値】
See the Pen flexbox- align-content-stretch by kenichi (@ken81) on CodePen.
上に隙間なく改行されるflex-start
See the Pen flexbox-align-content-flex-start by kenichi (@ken81) on CodePen.
下に隙間なく改行されるflex-end
See the Pen flexbox-align-content-flex-end by kenichi (@ken81) on CodePen.
タテに中央寄せで隙間なく改行されるflex-center
See the Pen flexbox-align-content-center by kenichi (@ken81) on CodePen.
flexアイテムが上下いっぱいに改行されるspace-between
See the Pen flexbox-align-content-space-between by kenichi (@ken81) on CodePen.
flexアイテムの上下に均等なスペースが入るspace-around
See the Pen flexbox-align-content-space-around by kenichi (@ken81) on CodePen.
flexアイテムの順番を指定できるorderプロパティ
ここから先で紹介するプロパティはすべてflexコンテナではなく、flexアイテムをセレクタにします。
orderプロパティは、order:番号;という形で各flexアイテムに数字を指定すると数字の順番にアイテムが並びます。orderプロパティの初期値は「0」になっています。
CSS
.item1{order:3;}
.item2{order:2;}
.item3{order:1;}
.item4{order:4;}
.item5{order:5;}
See the Pen flexbox-order by kenichi (@ken81) on CodePen.
このようにorderプロパティは、HTMLの要素の並び順と見た目の順番を変えることができます。
各flexboxアイテムの幅の比率を指定するflex-growプロパティ
flex-grow:数字;という形で指定すると各flexboxアイテムごとの幅の比率が指定できます。下記は左から順番に１～５の数字を指定したものです。flex-growの初期値は「0」になっています。
See the Pen flexbox-flex-grow by kenichi (@ken81) on CodePen.
少し分かりにくいかもしれませんが、左から順番に比率（幅）が大きくなっています。
各flexboxアイテムごとの幅縮まり度を指定するflex-shrinkプロパティ
flex-growプロパティは値が大きいほど幅の比率が大きくなりましたが、反対にflex-shrinkプロパティは数字が大きいほど幅が縮まります。このプロパティが有効になる条件は、flexboxアイテムの幅の合計がflexコンテナの幅よりも大きいときです。flex-shrinkの初期値は「1」です。値を「0」にすると元々のサイズを保ちます。
下記は、左から順番に１～５の数字を指定したものです。
See the Pen flexbox-flex-shrink by kenichi (@ken81) on CodePen.
数字が大きくなるほど、幅が縮んでいるのが確認できます。
flexboxアイテムの幅を指定するflex-basisプロパティ
flexboxアイテムの幅は、widthではなくflex-basisで指定します。指定の仕方はwidthとほぼ同じです。下記は、一番左のflexboxアイテムにflex-basis:200px;を指定した例です。
See the Pen flexbox-flex-basis by kenichi (@ken81) on CodePen.
flex-basisの初期値は「auto」になります。
「flex-grow」「flex-shrink」「flex-basis」のショートハンド flexプロパティ
「flex-grow」「flex-shrink」「flex-basis」の３つのプロパティが同時に設定できるプロパティです。
flex: flex-growの値 flex-shrinkの値 flex-basisの値
という形で指定します。
例えば、
CSS
flex-grow: 0; flex-shrink: 1; flex-basis: auto;
は下記のように記述できます。
CSS
flex: 0 1 auto;
個別にflexboxアイテムのタテの高さや位置を指定するalign-selfプロパティ
先ほど「タテの高さや位置を指定するalign-itemsプロパティ」のところでは、すべてのflexboxアイテムのタテの高さや位置を指定する設定についてお話しました。align-selfは、個別のflexboxアイテムに対して同じようにタテの高さや位置が指定できるプロパティです。align-itemsとalign-selfが同時に指定された場合、個別に指定したalign-selfの方が優先されます。align-selfの初期値は「auto」になります。
下記は一番右のflexboxアイテム以外を個別に指定した例です。
See the Pen flexbox-align-self by kenichi (@ken81) on CodePen.
flexコンテナにalign-items:stretch;が指定されていますがalign-selfの値の方が優先されているのが分かります。
以上がFlexboxのお話でした。いかがだったでしょうか？プロパティが非常に多くて難しいと思われたかもしれません。使えそうなところからでも良いので少しずつ使ってみて下さい。お疲れ様でした。
