• 画面中央に要素を配置する例 *

• 片方を固定幅、一方を可変幅にする際は固定幅の要素をflex: 0に可変幅をflex: 1にする *

外側の要素に指定する属性  

flex-direction *
子要素をどの方向で表示するか
example

justify-content *
子要素を配置する位置
example

align-items *
子要素を配置する始点
example

flex-wrap *
折り返し

内側の要素に指定する属性

order *
子要素の表示順序
example

flex-grow *
子要素の大きさの比率
example

flex-shrink *

align-self *

flex-basis *

Flexbox Patterns