Flex 布局

给父元素写 display: flex，它的直接子元素就会排成一行。常用属性：flex-direction 决定横排还是竖排，justify-content 控制主方向上怎么分布（靠左、居中、两端对齐），align-items 控制另一个方向上的对齐，gap 设置子元素间距，子元素写 flex: 1 表示占满剩余空间。

Flex 擅长「一维」排列：导航栏左边 Logo 右边按钮、按钮组、图标加文字、垂直居中。放不下时用 flex-wrap: wrap 换行。

和 Grid 布局 的分工：Flex 沿一条线排，每行各排各的；Grid 按行和列的网格排，适合行列都要对齐的卡片墙、整页框架。只有一行或一列时，用 Flex 就够了。