flex を制するものは CSS を制す！flexboxの子要素に指定するプロパティ

2018年4月30日2018年6月13日

flexを制するものはCSSを制す！まぁいいすぎですね、しかしCSSを制す為の一歩にはなる！
と、言うわけで前回の
CSSのこれからはflexの時代だ！flexboxを使いこなすためのプロパティ一覧
に続いて「flex」に関して、今回は「flex」の子要素に対するプロパティです。

flexbox子要素の並び順をきめる order

CSS

といった感じで整数で指定します。
数字の大小がそのまま並び順となり、負の値も指定できます。

幅の伸び率をきめる flex-grow

CSS

親要素のスペースに空きがある場合に、
各要素はその空きを埋めるように伸びます。
これは「0以上の整数」で指定します。
0を指定した場合は伸び率0、つまり伸びません。

伸び率は他の兄弟要素に対して指定するので、
同じ値が指定されていると、
元の幅（個別で指定された幅）から、同じだけ伸びる。

幅の縮み率をきめる flex-child_shrink

CSS

親要素のスペースが足らない場合に各子要素をどれだけ縮めるかを比率で指定します。
flex-grow と同じく、「0以上の整数」で指定します。

縮み率は、他の兄弟要素に対して指定するので、 同じ値が指定されていると、 元の幅から、同じだけ縮む。

幅を指定する flex-child_basis

CSS

指定した flex 子要素の幅を指定する。
width と同じように指定でき、auto はコンテンツの幅となる。
また、auto 以外の値を指定した場合 width より優先される。

grow、shrink、basisをまとめて指定する flex-child_flex

CSS

flex-grow、flex-shrink、flex-basis の順で指定する。
初期値は「 0 1 auto 」

縦の配置を指定する flex-child_align-self

CSS

親要素の高さに空きスペースがあった場合に、子要素をどのように配置するかを指定します。
align-items と同じ機能だが、align-self が優先される。

flexbox まとめ

flex の各プロパティを使用することで、
それまで float を指定し、高さを取得し、と色々な手間がかかっていたことが、
簡単に実現できるようになります。

flexboxを使用できる環境の場合は是非とも使用して、
作業にかかる手間を減らしていきましょう！