study / flex布局｜Gloria's blog

属性	描述	可选值
flex-direction	item排列方向	row(默认),row-reverse,column,column-reverse
flex-wrap	换行显示	nowrap(默认),wrap,wrap-reverse
flex-flow	flex-direction + flex-wrap	row wrap(默认)
justify-content	item在主轴的对齐方式	flex-start,flex-end,center,space-between,space-around
align-items	item在交叉轴的对齐方式	flex-start,flex-end,center,baseline,stretch
align-content	多根轴线对齐方式	flex-start,flex-end,center,space-between,space-around,stretch
order	item的排列顺序	0(默认)，值越小越靠前
flex-grow	多余空间时item的放大比例	0(默认，有多余空间也不放大)
flex-shrink	空间不足时item的缩小比例	1(默认，空间不足时缩小)
flex-basic	item在主轴上占据的空间	auto(默认)
flex	grow,shrink,basis缩写	0 1 auto(默认)
align-self	单个item独特的对齐方式	同align-items，且可覆盖

解释flex：1

flex： flex-grow + flex-shrink + flex-basic 默认值： 0 1 auto

1. flex：none，即 0 0 auto

.item { flex：none }
.item {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: auto;
}

2. flex：auto，即 1 1 auto

.item { flex：auto }
.item {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: auto;
}

3. flex：1（非负数字），即 1（非负数字） 1 0%

.item { flex：auto }
.item {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 0%;
}

4. flex：0%（或 24px），（不是非负数字），即 1 1 0%（24px）

.item { flex：0%(24px); }
.item {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 0%(24px);
}

5. flex：2 3（两个非负数字），即 2 3 0%

.item { flex：2 3; }
.item {
        flex-grow: 2;
        flex-shrink: 3;
        flex-basis: 0%;
}

6. flex：2 24px（一个非负数字，一个百分比或长度），即 2 1 24px

.item { flex：2 24px; }
.item {
        flex-grow: 2;
        flex-shrink: 1;
        flex-basis: 24px;
}