Flexbox 弹性盒子布局
将容器的 display 属性值改为 flex，容器变为弹性容器，内部子元素变为弹性子项。
Flexbox 通过主轴（Main Axis）和交叉轴（Cross Axis）来控制布局。
Flexbox 实时演示与原理图解
主轴 Main Axis →
交叉轴 Cross Axis ↓
空间分配公式
容器总宽
600px
子项基准尺寸和
300px
剩余空间
300px
flex 比例之和
4
每个子项的最终宽度
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
gap: 20px;
}
Flex 容器属性
启用 Flex 子项分配