网页css，多个子元素宽度不一，如何合理利用空间？

小李哥v5 · 发表于 2023-8-25 17:08:12

目前做的一个标签布局，父元素使用的是inline-flex布局，子元素的宽度是不一致的，这导致了很多的右侧空间浪费掉了，有什么办法能将这些空白的地方，用短的子元素填充进去？

让他看起来不那么空旷，不知道意思表达到位没有。有css能实现这个吗？还是说要JS来计算

时髦猪 · 发表于 2023-8-25 17:08:13

跟上面说的差不多

[JavaScript] 纯文本查看 复制代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
        <title>Untitled</title>
        <style>
        .inline-flex {  
width: 300px; 
}
        .parent {  
 display: inline-flex;  
 flex-wrap: wrap;  
}
.child {  
 flex-grow: 1;  
 padding: 10px;  
 box-sizing: border-box;  
}
</style>
</head>

<body>
<div class="inline-flex">  
<div class="parent">  
 <div class="child">子元素 11111111111111</div>  
 <div class="child">子元素 2</div>  
 <div class="child">子元素 3</div>  
 <div class="child">子元素 4</div>  
 <div class="child">子元素 5</div>  
 <div class="child">子元素 6</div>  
 <div class="child">子元素 7aaaaaaaaa</div>  
 <div class="child">子元素 8</div>  
 <div class="child">子元素 9</div>  
 <div class="child">子元素 10</div>  
 <div class="child">子元素 11</div>  
 <div class="child">子元素 12</div>  
</div>  
</div>  


</body>
</html>

补充内容 (2023-8-25 17:23):
但还是安顺序来的你那样的估计不好实现

冷风丶 · 发表于 2023-8-25 17:15:42

你可以使用CSS来实现这个效果，而无需使用JavaScript来计算。下面是一种可能的解决方案：

首先，你可以将父元素的布局改为`flex`，而不是`inline-flex`。这样可以让子元素在父元素内部占据多行空间。

然后，给子元素添加一个自适应的宽度属性，使它们能够填充剩余的空间。你可以使用`flex-grow`属性来实现这一点。将`flex-grow`属性设置为一个大于0的值，表示子元素可以根据剩余空间进行扩展。

以下是一个示例代码：

```css
.parent {
  display: flex;
  flex-wrap: wrap;
}

.child {
  flex-grow: 1;
}
```

在这个示例中，`.parent`是父元素的类名，`.child`是子元素的类名。通过将`.parent`的`display`属性设置为`flex`，并将`.child`的`flex-grow`属性设置为1，子元素将根据剩余空间进行扩展，填充父元素的多余空间。

请注意，这种方法会将子元素的宽度平均分配到可用空间。如果你希望子元素的宽度按照不同的比例进行分配，可以使用`flex-basis`属性来指定子元素的初始宽度。

希望这可以帮助到你！如果你有任何其他问题，请随时提问。

		自动登录	找回密码
密码			注册

[已解决] 网页css，多个子元素宽度不一，如何合理利用空间？

最佳答案

评分