flex 怎么用

阐述法

对元素使用 display:flex 后，此元素变为弹性容器，它的子元素变为弹性项目

常用属性：

flex-direction 属性决定了项目的排列方式（有四个常用可选值）
- row：行
- row-reverse
- column[ˈkɑːləm]：列
- column-reverse
flex-wrap 属性决定了项目排列满屏，是否换行（有三个常用可选值）
- nowrap
- wrap
- wrap-reverse
flew-flow 属性是 flex-direction flex-wrap
justify-content 属性决定了项目在主轴上的对齐方式（有五个常用可选值）
- flex-start
- flex-end
- center
- space-between
- space-around
align-items 属性决定了项目在交叉轴上的对齐方式（有三个常用可选值）
- flex-start
- flex-end
- center
flex 属性属性是 flex-grow, flex-shrink 和 flex-basis 的简写
- 默认值为 0 1 auto（后两个属性可选）。
- 还有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
- 建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
- 能回答 flex-basis、flex-grow、flex-shrink 用法更好(给面试官讲一个分配公司收益的例子)