CSS | flex

Referrence:
css-tricks.com/snippets/cs…

一、关键点（key point）

1. 主轴（main axis）与副轴（cross axis）
2. 父元素与子元素

二、属性

1. 父属性

.container {
    //定义一个flex盒子
    display: flex;
    //定义flex排列方向
    flex-direction: row | row-reverse | column | column-reverse;
    //定义主轴方向元素如何排列
    justify-content: flex-start | flex-end | center | space-between | space-around;
    //定义在副轴上元素如何排列（适用于单行元素）
    align-items: flex-start | flex-end | center | stretch | baseline;
    //定义在副轴上元素如何排列（适用于多行元素）
    align-content: flex-start | flex-end | center | stretch | space-between | space-around;
    //定义元素间的间隔
    gap: <length>;
}

2. 子属性

.item {
    //定义元素排列顺序，order越小，优先级越高，排得越靠前（默认为0）
    order: <number> | 0;
    //定义有空余空间时，该元素的增长比例（默认为0）
    flex-grow: <number> | 0;
    //同上(默认为1）
    flex-shrink: <number> | 1;
    //flex-grow,flex-shrink,flex-basis的简写
    flex: 0 1 auto;
    //定义某个子元素的特殊位置
    align-self: auto | flex-start | flex-end | center | stretch | baseline;
}