使用HTML+CSS实现一个流势布局
时间: 2024-01-31 21:04:42 浏览: 33
以下是一个简单的流式布局的HTML CSS代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>Flow Layout Example</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
.container {
max-width: 1000px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: stretch;
padding: 20px;
background-color: #fff;
box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
}
.item {
flex-basis: calc(33.33% - 20px);
margin-bottom: 20px;
background-color: #ddd;
padding: 20px;
border-radius: 5px;
box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
}
@media only screen and (max-width: 768px) {
.item {
flex-basis: calc(50% - 20px);
}
}
@media only screen and (max-width: 480px) {
.item {
flex-basis: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
<div class="item">Item 8</div>
<div class="item">Item 9</div>
</div>
</body>
</html>
```
这个布局使用了flexbox和媒体查询来实现自适应效果。.container是一个flex容器,并且flex-wrap属性设置为wrap以实现换行。justify-content属性设置为space-between以在每行之间平均分配剩余空间。align-items属性设置为stretch以使每个项目在交叉轴上填充整个容器高度。
.item是每个项目的类,它的flex-basis属性设置为33.33%减去20px的边距,以使每行有3个项目。在@media查询中,我们将flex-basis设置为50%或100%以在较小的屏幕上实现自适应。其他样式是为了美化和提高可读性。