flex弹性盒子

flex弹性盒子

总体概述：

浏览器兼容

表格中的数字表示支持该属性的第一个浏览器的版本号。解决兼容：使用 -webkit- 或 -moz- 为指定浏览器的前缀。

容器属性

flex-direction

flex-direction属性决定主轴的方向（即项目的排列方向），默认：row

• row：横向从左到右排列（左对齐），默认的排列方式。
• row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
• column：纵向排列。
• column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

justify-content

justify-content 属性决定子项在主轴上的对齐方式，默认：flex-start。

align-items

(单行) align-items 属性定义项目在交叉轴上如何对齐，默认 stretch。

align-content

(多行) align-content 属性定义了子项在交叉轴的对齐方式，与 justify-content 差不多，默认：stretch。

flex-wrap

flex-wrap 属性用于指定弹性盒子的子元素换行方式，默认 flex-wrap: nowrap 单行。

子项属性

order

order:<integer>; 用整数值来定义排列顺序，数值小的排在前面。可以为负值。

margin

设置 margin 值为 auto 值，自动获取弹性容器中剩余的空间

完美居中：只需要设置 margin: auto; 可以使得弹性子元素在两上轴方向上完全居中:

align-self

align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。

flex

flex 属性用于指定弹性子元素如何分配空间。

通常就是设置 flex:<integer> 来指定每个子项目占多少空间

语法：

flex: auto | initial | none | inherit |  [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

• auto: 计算值为 1 1 auto
• initial: 计算值为 0 1 auto
• none：计算值为 0 0 auto
• inherit：从父元素继承
• [ flex-grow ]：定义弹性盒子元素的扩展比率。
• [ flex-shrink ]：定义弹性盒子元素的收缩比率。
  to
• inherit：从父元素继承
• [ flex-grow ]：定义弹性盒子元素的扩展比率。
• [ flex-shrink ]：定义弹性盒子元素的收缩比率。
• [ flex-basis ]：定义弹性盒子元素的默认基准值。