自分の知識整理のため、Udemyの講座で解説されていたものをいろいろ試して自分用にまとめてみた。
Webデザイナーのキャリアを未経験からスタートするためのオールインワン講座
https://www.udemy.com/share/1026bmAEcZcllWTX0F/
用語
フレックスコンテナ
display:flexと指定されたブロックのことで、これを親要素として扱う
フレックスアイテム
フレックスコンテナの直下にあるブロック群で、これらの伸縮や配置を行う
フレックスボックス
フレックスコンテナとフレックスボックスを合わせたレイアウトモデルの通称
主軸と交差軸
主軸は伸縮が出来る方向でflex-directionによって指定され、既定値は横方向
主軸に対して垂直になる軸を交差軸といい、こちらは配置調整はできるが、伸縮はできない
フレックスボックス設定
display : flex
自ブロックをフレックスコンテナとして指定し、内包直下の子ブロック群をフレックスアイテムに指定
CSSプロパティと配置プロパティの組み合わせでboxの位置を自動的に配置
CSSプロパティ
flex-direction[親]
フレックスコンテナの主軸（既定値は横軸）と方向（既定値は左→右）を指定する
column指定の時、html,body{height:100%;に指定しないと、画面全体に伸縮しないので注意
-
row：横軸で→方向 -
row-reverse：横軸で←方向 -
column：縦軸で↓方向 -
column-reverse：縦軸で↑方向
flex-wrap [親]
ビューポートに合わせて、フレックスコンテナの折り返しの指定
-
nowrap：折り返しなし -
wrap：折り返しあり -
wrap-reverse：上下反転した折り返しあり
flex-grow：growとは両立しないが、min-width指定あればOK
flex-flow[親]
flex-directionとflex-wrapを一括指定する
flex-grow [子]
フレックスコンテナのサイズに応じて、フレックスアイテムの主軸方向への伸長係数を指定
既定値は0で、正の値のみ有効
コンテナサイズが広くなった時に、アイテムの幅をどういった割合で伸ばすかを指定できる
max-widthで最大値を制限する
flex-shrink [子]
フレックスコンテナのサイズに応じて、フレックスアイテムの主軸方向への収縮係数を指定
既定値は0で、正の値のみ有効
コンテナサイズが狭くなった時に、アイテムの幅をどういった割合で縮めるか指定できる
min-widthで最小値を制限する
flex-basis [子]
フレックスアイテムのコンテンツボックスの初期寸法を指定
あまり使わないほうがよさそう
flex [子]
flex-grow、flex-shrink、flex-basisの3種類のCSSプロパティを指定する
order [子]
コンテナアイテムの順番を指定し、既定値は0で整数（-も使える）のみ指定可能
配置プロパティ
フレックスアイテムの横方向の配置
フレックスコンテナの主軸に対して、フレックスアイテムの間隔を指定する
flex-growが指定すると効果がない
- 右寄せ：
justify-content: flex-end - 中寄せ：
justify-content: center - 左寄せ：
justify-content: flex-start - アイテム間均等：
justify-content: space-between - アイテム間均等+左右半均等：
justify-content: space-around - アイテム間均等+左右全均等：
justify-content: space-evenly
フレックスアイテムの縦方向の配置
フレックスコンテナの交差軸に対して、フレックスアイテムの配置を指定する
フレックスアイテムを個別に指定するには子要素にalign-selfを使用する
- 上寄せ：
align-items: flex-start - 中寄せ：
align-items: center - 下寄せ：
align-items: flex-end
フレックスアイテムの間隔を指定
フレックスアイテムの左右上下の間隔を指定する
flex-growを指定すると効果がある
- 主軸の間隔：
row-gap:数値 - 交差軸の間隔：
column-gap:数値 - 両軸の間隔：
gap:主軸数値 交差軸数値