Flex 布局
Flexbox
样式与 CSS也叫：弹性布局、Flex、弹性盒子
一句话：让一组元素沿一个方向（横向或纵向）排成一排，并方便地控制对齐、间距和伸缩的 CSS 布局方式。
详细解释
给父元素写 display: flex，它的直接子元素就会排成一行。常用属性：flex-direction 决定横排还是竖排，justify-content 控制主方向上怎么分布（靠左、居中、两端对齐），align-items 控制另一个方向上的对齐，gap 设置子元素间距，子元素写 flex: 1 表示占满剩余空间。
Flex 擅长「一维」排列：导航栏左边 Logo 右边按钮、按钮组、图标加文字、垂直居中。放不下时用 flex-wrap: wrap 换行。
和 Grid 布局 的分工：Flex 沿一条线排，每行各排各的；Grid 按行和列的网格排，适合行列都要对齐的卡片墙、整页框架。只有一行或一列时，用 Flex 就够了。
示例
灰度线框示意，只表达结构，不代表具体视觉风格。
怎么跟 AI 说
可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。
顶部导航栏用 Flex 布局：Logo 在最左，菜单项紧跟 Logo、间距 24px，登录按钮推到最右侧；所有元素垂直居中；屏幕宽度小于 768px 时隐藏菜单项，只保留 Logo 和右侧的汉堡菜单按钮。