Flexbox 一维布局速记

Flexbox 擅长在一条轴上分配空间：导航菜单、工具栏、等分卡片都很合适。

核心属性

.row {
  display: flex;
  flex-direction: row;      /* 主轴：水平 */
  justify-content: space-between; /* 主轴对齐 */
  align-items: center;      /* 交叉轴对齐 */
  gap: 12px;
}

伸缩子项

• flex: 1：吃掉剩余空间，适合“左侧固定、右侧自适应”。
• flex-wrap: wrap：空间不够时换行。
• align-self：单独覆盖某个子项的交叉轴对齐。

先定主轴方向，再调 justify 与 align，多数布局立刻对上。