首页用FLEX布局，做一个盒子，浏览器窗口最大时，项目显示为2列3行，浏览器窗口缩小后，项目按垂直方向显示为1列

用FLEX布局，做一个盒子，浏览器窗口最大时，项目显示为2列3行，浏览器窗口缩小后，项目按垂直方向显示为1列

时间: 2024-09-30 18:07:20 浏览: 66

在Flex布局中，你可以通过设置容器的`display`属性为`flex`，并结合合理的`flex-direction`, `flex-wrap`以及`flex-grow`等属性来实现这样的效果。下面是一个简单的HTML和CSS示例： ```html <!DOCTYPE html> <html lang="en"> <head> <style> .container { display: flex; flex-wrap: wrap; justify-content: space-between; /* 或者使用 'flex-start', 控制元素如何沿着主轴排列 */ } .box { flex: 1 0 calc(33.33% - 10px); /* 初始宽度为总宽度除以3，减去一些边距 */ margin: 5px; box-sizing: border-box; padding: 10px; background-color: #f8f9fa; } </style> </head> <body> <div class="container"> <div class="box">Box 1</div> <div class="box">Box 2</div> <div class="box">Box 3</div> <div class="box">Box 4</div> <div class="box">Box 5</div> </div> </body> </html> ``` 在这个例子中，`.container`设置了`flex-wrap: wrap`使其在行之间换行，`justify-content: space-between`会让元素均匀分布在一行内，如果行不满，会自动开始新的一行。当浏览器窗口缩小时，由于设置了`flex: 1 0 calc(33.33% - 10px)`，每个`.box`元素会在垂直方向上平均分配空间，并按需要堆叠，直到达到最大宽度的一半。

阅读全文