1. bobu_web

    Posted

    bobu_web
Changes in title
+2017年になったのでそろそろCSSのレイアウトをおさらいする(CSS Flexbox Layout)
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,42 @@
+[cloudpack あら便利カレンダー 2017](https://cloudpack.github.io/benri2017/) 5日目の記事です。
+
+最近めっきりfloatをレイアウト組に使わなくなりました。自分ではこの1年くらい書いた記憶がないです。
+他のCSS関連の記事でもFlexbox, Grid Layoutのキーワードがみえてきたので、このあたりで今CSSでレイアウト組む場合の選択肢についてまとめようと思います。
+
+#Flexbox Layout
+こちらはざっくり説明すると親要素の直下の子要素に対し縦軸もしくは横軸に一律にコントロールしたいときにかなり威力を発揮します。
+
+## justify-content(親要素に指定)
+親要素全体に対して子要素を横軸でどう統一するかを指定します。よく使う`justify-content: center;`を指定した場合が以下の例です。
+![image.png](https://qiita-image-store.s3.amazonaws.com/0/35271/98fb3b3e-faf8-9523-531f-adec6f6a46d5.png)
+[CodePen](https://codepen.io/nobu222/pen/awObBO)
+
+## align-items(親要素に指定)
+親要素全体に対して子要素を縦軸でどう統一するかを指定します。よく使う`align-items: center;`を指定した場合が以下の例です。
+ちなみに`justify-content:center;`と組み合わせるとボックス全体の中心に配置することが出来ます。
+![image.png](https://qiita-image-store.s3.amazonaws.com/0/35271/e0dd24b2-6612-a469-2ada-190b04228586.png)
+[CodePen](https://codepen.io/nobu222/pen/PjqomQ)
+
+## flex-grow(子要素に指定)
+子要素の拡大率を他の子要素と__相対的に__決定されます。ちなみに`width`指定よりも優先されます。
+相対的にというのがポイントで`flex-grow`の指定をもとにさらに後述の`flex-basis`、親要素の`flex-wrap`も影響を受けます。
+あとに続く`flex-shrink` `flex-basis`も含めて個人的にはちょっとつかいづらいなあと思うところです。
+![image.png](https://qiita-image-store.s3.amazonaws.com/0/35271/2cbba4df-71fa-ef5d-1cf4-101522de5a9d.png)
+[CodePen](https://codepen.io/nobu222/pen/rwVNwN)
+
+## flex-shrink(子要素に指定)
+子要素の縮小率を他の子要素と__相対的に__決定されます。
+![image.png](https://qiita-image-store.s3.amazonaws.com/0/35271/b40cff17-d762-7df8-eeb2-04e7919bda5a.png)
+[CodePen](https://codepen.io/nobu222/pen/jwPOaJ)
+
+## flex-basis(子要素に指定)
+子要素の幅を任意に(%,pxなど)指定します。ただし親要素が指定の幅よりも小さい場合はそのとおりにはなりません。
+![image.png](https://qiita-image-store.s3.amazonaws.com/0/35271/a460f941-e8f0-05a7-9bda-5e23e6d1bfc4.png)
+[CodePen](https://codepen.io/nobu222/pen/OgVJzE)
+
+## その他
+- flex-wrap 親要素に指定。子要素の幅合計が親要素の幅よりも大きい場合の折り返すかどうかの指定。流し込みレイアウト時などはこれを指定しています。
+- flex `flex-grow` `flex-shrink` `flex-basis`のショートハンド指定
+- order 子要素に指定することでレイアウトの順番を変更することが出来ます。window幅によって順番を変えたいときなどに重宝します。
+
+以上がFlex Layoutの概要です。チートシート的に役立てれば嬉しいです。