Flex移动端布局,头部和尾部宽度一样,中间宽度适应屏幕,中间的盒子包含两个div,分别在左边和右边排列,写一船带阿米实现它
时间: 2024-10-23 07:17:05 浏览: 29
【移动端网页布局】Flex 弹性布局案例 ③
Flexbox是一种强大的CSS布局模型,特别适合移动端设计,因为它能够轻松地处理响应式布局。为了实现您描述的需求,可以使用HTML结构如下:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
display: flex;
justify-content: space-between; /* 分割左右两边 */
align-items: center; /* 非必需,如果需要头部和尾部对齐,可添加此行 */
background-color: #f8f9fa;
padding: 20px;
height: 100vh; /* 假设头部和尾部固定高度 */
}
.left-side, .right-side {
flex: 1; /* 自动填充剩余空间 */
border: 1px solid #ccc;
margin-right: 10px; /* 可调整间距 */
}
.left-side {
background-color: #e9eaed;
}
.right-side {
background-color: #f5f7fa;
}
</style>
</head>
<body>
<div class="container">
<div class="left-side">左侧内容区</div>
<div class="right-side">右侧内容区</div>
</div>
</body>
</html>
```
在这个例子中,`.container` 容器使用 `display: flex;` 设置为flex布局模式,`justify-content: space-between;` 使得两部分等宽占据剩余空间,`align-items: center;` 确保头部和尾部保持在容器中央。`.left-side` 和 `.right-side` 的 `flex: 1;` 表示它们会自动伸缩以适应中间区域。
阅读全文