首页一共10个数据 flex 一行三个不居中

一共10个数据 flex 一行三个不居中

时间: 2024-12-26 20:29:35 浏览: 3

要在HTML中显示10个数据，并使用Flex布局让它们一行显示三个而不居中对齐，你可以这样做： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .container { display: flex; flex-wrap: wrap; /* 解决换行 */ } .item { flex: 1; /* 同等分配空间 */ box-sizing: border-box; /* 包含边框和内填充 */ margin: 5px; /* 添加间距，可根据需求调整 */ padding: 10px; } </style> </head> <body> <div class="container"> <div class="item">数据1</div> <div class="item">数据2</div> <div class="item">数据3</div>  <div class="item">数据9</div> <div class="item">数据10</div> </div> </body> </html> ``` 在这个例子中，`.container` 使用了 Flexbox 的 `display: flex`，`flex-wrap: wrap` 让元素可以在新的一行上继续排列。每个 `.item` 具有相同的宽度并使用 `flex: 1` 来平均分配容器的空间。如果你想让每个项目始终占据固定宽度而不是自适应，可以替换 `flex: 1` 为 `width: calc(33.33% - 2 * margin);` 并移除 `box-sizing`。这里假设总宽度被均匀分成3份，每份减去两边的外边距。

阅读全文