介绍

Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

指定flex

display : flex;
任何一个容器都可以指定为 Flex 布局。

兼容性

点我查看兼容性

flex的属性最好还是一个一个查；这里推荐看一下这个https://blog.csdn.net/csm0912/article/details/88815330

速记版

  1. display : flex; // 声明使用flex布局
  3. flex-direction : row | row-reserve | column | column-reserve;   // 主轴方向
  4. justify-content: flex-satrt | flex-end | center | space-between | space-around; // 主轴对齐方式
  5. flex-warp : nowarp | warp | warp-reserve ;   // 是否换行;
  6. flex-flow : <flex-diection> | <flex-warp>   // 中间两个属性的简写
  8. align-items : flex-satrt | flex-end | center | baseline | strech; //侧轴对齐方式
  9. align-cotent: flex-satrt | flex-end | center | space-between | space-around | strech(默认)
  11. // 其他
  12. flex : number // 定义比例

阮一峰的教程