首页用FLEX布局，做如下效果，浏览器窗口最大时，项目显示为2列3行，浏览器窗口缩小后，项目按垂直方向显示为1列例如静夜思和将进酒

用FLEX布局，做如下效果，浏览器窗口最大时，项目显示为2列3行，浏览器窗口缩小后，项目按垂直方向显示为1列例如静夜思和将进酒

时间: 2024-09-30 09:04:34 浏览: 82

在Flexbox布局中，你可以轻松地实现这种响应式的效果。首先，你需要设置容器的display属性为flex，并确定其基础布局模式。对于2列3行布局，可以设置`flex-direction: row;`和`flex-wrap: wrap;`，使得元素在一行放不下时换到下一行。当窗口变小，屏幕宽度不足以放下两列时，可以通过调整`flex-direction`为`column`，使项目按照垂直方向堆叠。同时，你可以使用媒体查询@media来针对不同的视口尺寸应用不同的样式。下面是一个简单的例子： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .container { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; } @media (max-width: 600px) { /* 可以自定义适应的屏幕宽度 */ .container { flex-direction: column; } } .item { flex: 1 0 25%; /* 设置每个项目的弹性，保证每行两个，超过则自动换行 */ box-sizing: border-box; padding: 10px; margin-bottom: 10px; } </style> </head> <body> <div class="container"> <div class="item">静夜思</div> <div class="item">将进酒</div>  </div> </body> </html> ``` 在这个例子中，`.item`类设置了每个项目的基本样式和弹性伸缩规则。当窗口大小小于600像素时，`.container`的`flex-direction`会变为`column`，项目就会按垂直顺序排列。

阅读全文