Flex常见属性补充（字典版）-CSDN博客

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

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

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

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

决定容器主轴的方向

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

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

定义换行方式

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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