Flex常见属性补充（字典版）

Flex布局

Flexible box，弹性布局，任何元素都支持，行业元素也能够采用.

.box {
    display: inline-flex; // 行业元素flex
}
复制代码

webkit内核浏览器必须加上-webkit-

.box {
    display: -webkit-flex; // safari
}
复制代码

容器属性

flex-direction

决定容器主轴的方向

flex-direction: row(默认) | row-reverse | column | cloumn-reverse
复制代码

row/row-reverse：水平，起点一左一右
column/cloumn-reverse: 垂直，起点一上一下

flex-wrap

定义换行方式

flex-wrap: nowrap(默认) | wrap | wrap-reverse
复制代码

nowrap: 不换行
wrap: 换行
wrap-reverse: 换行，自下而上

flex-flow

flex-derection 和 flex-flow，默认row nowrap

flex-flow: [flex-derection] [flex-flow]
复制代码

justify-content

定义项目在主轴方向的对齐方式

justify-content: flex-start(默认) | flex-end | center | space-between | space-around
复制代码

flex-start: 左对齐
flex-end： 右对齐
center： 居中对齐
space-between：两端对其，项目之间间隔相同
sapce-around： 每一个项目两侧的间隔相同

align-items

定义项目在交叉轴（与主轴交叉）上的对其方式

align-items: flex-start | flex-end | center | baseline | stretch（默认）
复制代码

flex-start: 交叉轴起点对齐
flex-end: 交叉轴终点对齐
flex-center： 交叉轴中点对齐
baseline： 每一个项目的第一行文字基线对齐
stretch： 若是项目未设置高度或者设置的高度为auto，将占满整个交叉轴

align-content

定义拥有多跟轴线的项目对齐方式，若仅有一根轴线，则该属性不起做用

align-content: flex-start | flex-end | center | space-between | space-around | stretch(默认)
复制代码

flex-start：交叉轴起点对齐
flex-end： 交叉轴终点对齐
center： 交叉轴中点对齐
space-between：交叉轴两端对齐，各中心轴间隔相等
space-around: 每根轴线两端间隔相等
stretch： 轴线沾满整个交叉轴

项目属性

order

order定义项目的排列顺序，数值越小排列越靠前。

.item {
    order: [integer](默认0)
}
复制代码

flex-grow

flex-grow定义项目的放大比例，默认为0，即即便有多余空间也不放大。

.item {
    flex-grow: [number](默认0)
}
复制代码

当容器中的每一个项目flex-grow都为1时，则他们等分剩余的空间；当某一个flex-grow为2时，其余的为1，则它的剩余空间时其余项目的2倍。

flex-shrink

flex-shrink定义项目的缩小比例，默认为1，即空间不足，项目将缩小。

.item {
    flex-shrink: [number](默认)
}
复制代码

当一个容器中全部项目的flex-shrink都为1时，则当容器空间不足时，全部项目将等比缩小。当某一个项目flex-shrink为0时，其余为1，则当空间不足时，该项目不会缩小。

flex-basis

定义项目在主轴上占的空间。默认为auto，即按项目原本的大小占据空间。

.item {
    flex-basis: [length] | auto
}
复制代码

flex

flex-grow、flex-shrink以及flex-basis的集合

.item {
    flex: [flex-grow] | [flex-shrink] | [flex-basis]
}
复制代码

align-self

单独定义项目在交叉轴上的对齐方式，可覆盖align-item。默认值为auto，表示继承父元素的align-item属性，若是没有父元素则为stretch。

.item {
    align-self: auto | flex-start | flex-end | center | baseline | stretch
}
复制代码