相关属性

flex-direction:column

1.justify-content:flex-start (紧贴红线顶部)

2. justify-content: center (在红线上垂直居中)

3. justify-content: flex-end(在红线上垂直居中)

4. justify-content: space-between (沿红线均匀撑开)

5. justify-content: space-around (沿红线均匀分布)

1. flex-wrap: wrap (装不下就换行)

对比：flex-wrap: nowrap (默认，死活不换行)

2. flex-grow: 1 (平分剩余空间)

对比：flex-grow 比例分配 (1:2:3)

3. flex-shrink 演示 (空间不够时的退让)

对比：第三个盒子拒绝收缩 (flex-shrink: 0)

flex-direction:row

交叉轴方向