【前端开发】CSS：flex属性

• flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。

• flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性

• 作用：让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容

• 浏览器兼容：
  （谷歌）-webkit
  （IE）-ms-
  （火狐）-moz-
  （safari）-webkit-

• 语法：flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

• 属性值：

• flex-grow 一个数字，规定项目将相对于其他灵活的项目进行扩展的量。

• flex-shrink 一个数字，规定项目将相对于其他灵活的项目进行收缩的量。

• flex-basis 项目的长度。合法值：“auto”、“inherit” 或一个后跟 “%”、“px”、“em” 或任何其他长度单位的数

• auto 与 1 1 auto 相同。

• none 与 0 0 auto 相同。

• initial 设置该属性为它的默认值，即为 0 1 auto。请参阅 initial。

• inherit 从父元素继承该属性。请参阅 inherit
  -【常见父项属性】

• flex-direction:设置主轴的方向；row默认值从左到右；row-reverse从右到左；column从上到下；column-reverse从下到上

• justify-content：设置主轴上的子元素排列方式；flex-start默认值从头部开始，如果主轴是x轴，则从左到右；flex-end从尾部开始排列；center在主轴居中对齐（如果主轴是x轴则水平居中）；space-around平分剩余空间；space-between先两边贴边再平分剩余空间

• flex-wrap：设置子元素是否换行；nowrap默认不换行；wrap换行

• align-content：设置侧轴上的子元素的排列方式（多行）；flex-start默认值在侧轴的头部开始排列；；flex-end在侧轴的尾部开始排列；center在侧轴中间显示；space-around子项在侧轴平分剩余空间；space-between子项在侧轴先分布在两头，再平分剩余空间；stretch设置子项元素高度平分父元素高度

• align-items：设置侧轴上的子元素排列方式（单行）；flex-start默认值从上到下；flex-end从下到上；center挤在一起居中（垂直居中）；stretch拉伸

• flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap；flex-flow：row wrap；、

• align-self：控制子项在侧轴上的排列方式，允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性，默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

• order： 数值越小，排列越靠前，默认为0；和z-index不一样