FlexBox 弹性布局

参考教程：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

[TOC]

一、使用语法

1.1 指定Flex布局

/* 块级元素 */
.box { display: flex; }

/* 行内元素 */
.box { display: inline-flex; }

设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

1.2 容器的属性

1.2.1 flex-direction

1.2.2 flex-wrap

1.2.3 flex-flow

.box {
    flex-flow: <flex-direction> || <flex-wrap>
}

1.2.4 justify-content

1.2.5 align-items

align-items属性定义项目在交叉轴上如何对齐。

.box {
    align-items: flex-start | flex-end | center | baseline | stretch;
}

1.2.6 align-content

1.3 项目的属性

1.3.1 order

定义项目的排列顺序。

数值越小，排列越靠前，默认为0。（可设为负数）

所有flex子项的默认order属性值是0，因此，如果我们想要某一个flex子项在最前面显示，可以设置比0小的整数，如-1就可以了。

1.3.2 flex-grow

定义项目的放大比例。

默认为0，即如果存在剩余空间，也不会放大。

1.3.3 flex-shrink

定义了项目的缩小比例。

默认为1，即如果空间不足，则该项目将缩小。

若只有一个项目是设为0，则该项目在空间不足时不缩小，只缩小其余的项目。

1.3.4 flex-basis

定义了在分配多余空间之前，项目占据的主轴空间。

默认值为auto，即项目本来的大小。

还可以设置成其他长度单位，则项目将占据固定空间。

1.3.5 flex

.item{
    flex: flex-grow flex-shrink flex-basis
}

后两个属性可选。

• 默认值为：0 1 auto

• 快捷值

  • auto：1 1 auto；(可以自动放大缩小)
  • none: 0 0 auto;（不可以自动放大缩小)

• flex: 数字值

  • 取值为一个非负数，则该数字为 flex-grow值，flex-shrink为1，flex-basis为0%。
  • 取值为两个非负数，则分别为flex-grow值和flex-shrink值，flex-basis为0%。
  • 取值为一个长度或百分比，则为flex-basis值，flex-grow取1，flex-shrink取1。（可放大缩小）
  • 取值为一个非负数，一个长度或百分比，则分别为flex-grow和flex-basis值，flex-shrink取1。
  • 总结归纳
    • 如果只设了一个非负数，就是flex-grow，还设了一个非负数，就是flex-shrink。
    • 长度或百分比是为了flex-basis而设。
    • 没有设值时，flex-grow和flex-shrink都为1，flex-basis为0%。

1.3.6 align-self

允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。

默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

1.4 兼容性问题

• webkit内核浏览器，需加上-webkit-前缀。
• 可以很好的兼容IE11+版本。
• 对于IE10只有部分可以兼容，且使用时需加-ms-前缀。