相关属性
![]()
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
![]()
![]()
交叉轴方向
![]()
![]()
![]()
