flex布局 案例

### 关于Flex布局的实际应用案例 #### 经典左右固定中间自适应布局 在构建页面时，常见的需求之一是创建一个左侧栏、右侧栏固定宽度，而中间内容区域自适应宽度的布局。利用 `display: flex` 和 `flex-grow` 可以轻松达成此目的。 ```css .container { display: flex; } .sidebar-left, .sidebar-right { width: 200px; /* 左右两侧固定宽度 */ background-color: lightblue; } .main-content { flex-grow: 1; /* 中间部分占据剩余空间 */ padding: 20px; } ``` ```html <div class="container"> <div class="sidebar-left">Left Sidebar</div> <div class="main-content">Main Content Area</div> <div class="sidebar-right">Right Sidebar</div> </div> ``` 这种结构不仅简单明了，而且易于维护，在现代Web开发中非常普遍[^5]。 #### 子项按比例分配空间 另一个典型的应用场景是在同一行内按照特定的比例来安排多个元素的空间占比。比如下面的例子展示了一个三列布局，其中第二列占据了两倍于其他两列的空间： ```css .flex-container { display: flex; width: 60%; height: 150px; background-color: pink; margin: 0 auto; } .item { flex: 1; /* 默认每项占一份 */ } .item:nth-child(2) { flex: 2; /* 第二个子项占用双倍空间 */ background-color: purple; } ``` ```html <div class="flex-container"> <span class="item"></span> <span class="item"></span> <span class="item"></span> </div> ``` 这里的关键在于理解如何通过调整 `flex` 的值来改变各个项目的相对大小关系。 #### 创建响应式导航菜单 对于移动优先的设计理念来说，制作可以随屏幕尺寸变化而自动调整样式的导航条是非常重要的。借助媒体查询以及 Flexbox 提供的强大工具集，开发者能够快速搭建起既美观又实用的响应式导航组件。 ```css .navbar { display: flex; justify-content: space-between; align-items: center; padding: 1rem; } @media (max-width: 768px) { .navbar-menu { flex-direction: column; position: absolute; top: 60px; left: 0; right: 0; background-color: white; transform: translateY(-100%); transition: all ease-in-out 0.3s; &.is-active { transform: translateY(0); } } .nav-item { text-align: center; margin-bottom: 1rem; } } ``` 上述代码片段展示了当视窗宽度小于等于768像素时，原本水平排列的链接会转换成垂直列表形式，并隐藏起来直到用户点击触发显示按钮为止[^1]。