Flex布局

https://ruanyifeng.com/blog/2015/07/flex-grammar.html

https://flexboxfroggy.com/

flex-direction

确定主轴的方向

  • row-reverse：从右端到左端的方向

  • column：从上端到下端

  • column-reverse：从下端到上端

justify-content

确定主轴的对齐方式

  • flex-end：右对齐

  • center：居中

  • space-around：内容与内容固定相等间隔

  • space-between：两端对齐

align-items

确定交叉轴的对齐方式，交叉轴就是与主轴垂直的那个轴

  • flex-end：交叉轴的末端

order

重新排序，默认都是0

设置某个内容的order为1，那么这个内容将会排在最后

设置某个内容的order为-1，那么这个内容将会排在最前

align-self

特别内容在交叉轴的对齐方式

flex-wrap

主轴的换行方式

  • wrap：换行

  • wrap-reverse：换行且行互换

flex-flow

确定主轴与换行结合

align-content

多根线条在交叉轴的对齐方式

  • flex-start：线条被打包在容器的顶部

  • flex-end：线条被打包在容器的底部