flex 布局 -- flex 相关属性

flex

.parent {
    display: flex;
}

直接子元素中的块级元素不再霸道的占据一行，并且高度自动等于父元素的高度。

flex-direction

.parent {
    display: flex;
    flex-direction: row; // [row(default), column, row-reverse, column-reverse]
}

justify-content

.parent {
    display: flex;
    justify-content: center; // [center, flex-start(default), flex-end, space-between, space-around]
}

align-items

.parent {
    display: flex;
    align-items: center; // [center, flex-start, flex-end, stretch(default), baseline]
}

flex-wrap

flex-items 超出 flex-container 时是否换行

.parent {
    display: flex;
    flex-wrap: wrap; // [nowrap(default), wrap, warp-reverse]
}

flex-shrink

.flex-child {
    flex-shrink: 1; // [1(default), 正整数]，数字越大收缩越多
}

flex-grow (the opposite of flex-shrink)

.flex-child {
    flex-grow: 1; // [正整数]，数字越大增大越多
}

flex-basis

用于在 flex-shrink 或 flex-grow 之前初始化 flex item 的尺寸,单位是 px、em、% 等长度单位。

当 flex-item 的宽度大于 flex-basis 设定的值时，当 flex-item 的宽度持续增大，将会以 flex-grow 设定的值去作为增大速度。同理，减小时，使用 flex-shrink 设定的值作为缩小的速度。

.flex-child-1 {
    flex-basis: 10em;
}
.flex-child-2 {
    flex-basis: 10px;
}

flex shorthand

.flex-child {
    flex-grow: 2;
    flex-shrink: 2;
    flex-basis: 10em;
}
=>
.flex-child {
    flex: 2 2 10em;
}

order

这个属性告诉 CSS 我们的 flex-item 在 flex-container 中应该排在哪个位置，它的属性值是整数（负数，0，正数）数字越小排越前。

.flex-child-1 {
    order: 2;
}

.flex-child-2 {
    order: 1;
}

align-self

使用在 flex-item 上的属性，作用和 align-items 类似。是解决 float，clear 和 vertical-align 等 CSS 属性对 flex item 不起作用的技术方案。

.flex-child {
    align-self: center; // [center, flex-start, flex-end, stretch, baseline]
}