css弹性布局横向设置 多个div展示效果 当屏幕较小的时候 横向进行滚动

CSS弹性布局，也称为Flexbox布局，是一种现代的网页布局技术，用于在容器内轻松地创建响应式的、动态调整的网格布局。如果你想要在多个`<div>`元素上实现这种效果，在横向方向上，并当屏幕尺寸变小需要滚动查看所有内容时，可以这样做：

1. 首先，将包含这些`<div>`的容器设置为flex容器，通常通过设置`display: flex;`和`flex-direction: row;`来指定主轴（默认为水平方向）。

.container {
   display: flex;
   flex-direction: row;
   overflow-x: auto; /* 添加此行，当内容超出容器宽度时启用滚动 */
}

2. 如果需要在屏幕缩小时自动切换到单列排列，你可以使用媒体查询来调整容器的`flex-wrap`属性。当视口宽度小于某个值时，设置它为`nowrap`或`wrap`，以便在一行显示不下时换行。

@media (max-width: 768px) {
   .container {
      flex-wrap: wrap;
   }
}

3. 对于每个`<div>`元素，保持它们的`flex-grow`, `flex-shrink`, 和 `flex-basis` 属性为默认值，让它们能够平等地分配空间。如果需要，也可以单独控制某个元素的宽度比例。

.item {
   flex: 1; /* 默认值，等分空间 */
   /* 或者给特定元素设定宽度 */
   width: calc(33.33% - 10px);
}