前端开发:使用Flexbox布局实现快速响应式导航栏
Flexbox(弹性盒子)是现代 CSS 布局的基石,特别适合构建单行或单列的组件,如导航栏。
一、Flexbox 核心属性回顾
| 属性 | 作用 |
|---|---|
display: flex; |
激活容器的弹性布局特性。 |
justify-content |
子项在主轴(横向)上的对齐方式。 |
align-items |
子项在交叉轴(纵向)上的对齐方式。 |
二、实现响应式导航栏的思路
桌面端: 使用 display: flex; 和 justify-content: space-between; 使 Logo 和菜单项左右对齐。
移动端: 使用 CSS 媒体查询 (Media Query),将 flex-direction 改为 column,使菜单项垂直堆叠,并隐藏 Logo 或将其居中。
关键 CSS 代码片段 (移动端适配):
@media (max-width: 768px) {
.nav-menu {
display: none; /* 默认隐藏菜单,等待汉堡按钮点击 */
flex-direction: column;
width: 100%;
}
}
通过 Flexbox 的灵活性,我们能用极少的代码实现复杂的响应式布局。
