flex布局一行两个,两端对齐
时间: 2024-12-14 11:10:01 浏览: 5
使用Flexbox布局可以实现一行两个元素并且两端对齐。以下是实现的方法:
1. 首先,将容器的display属性设置为flex:
```css
.container {
display: flex;
justify-content: space-between;
}
```
2. 然后,设置子元素的宽度为50%(或根据需要调整):
```css
.item {
width: 48%; /* 留出一些间距 */
}
```
3. 如果需要响应式设计,可以使用媒体查询:
```css
@media (max-width: 600px) {
.item {
width: 100%;
}
}
```
完整示例:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox 两端对齐示例</title>
<style>
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
width: 48%;
background-color: #f0f0f0;
margin-bottom: 10px;
padding: 10px;
box-sizing: border-box;
}
@media (max-width: 600px) {
.item {
width: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<div class="item">项目 1</div>
<div class="item">项目 2</div>
<div class="item">项目 3</div>
<div class="item">项目 4</div>
</div>
</body>
</html>
```
这个示例会在一行中显示两个项目,并且它们之间有均匀的间距。当屏幕宽度小于600px时,项目会变为全宽显示。
阅读全文