gpt4 book ai didi

html - flex-grow 最大值或缩小元素之间空间的边距

转载 作者:行者123 更新时间:2023-12-03 20:56:07 29 4
gpt4 key购买 nike

我正在基于同一行上的两个列表构建导航。两个列表中的所有元素之间都应该有间距,但 25px最多。

flex-grow 的问题:
如果我使用 flex-grow,元素会变得大于它们自己的宽度 + 25px,因为有足够的可用空间。

margin-right 的问题:
如果容器较小,25px 的右边距不会减少,那么元素将断行而不是缩小它们的边距。

可能的解决方案:
在每个元素之间使用一个 div,给它 flex-grow:1max-width:25px .

没有额外的html还有另一种方法吗?

这是一个显示问题的代码笔:

ul,
li {
list-style: none;
margin: 0;
padding: 0;
}

ul,
.container,
.container2 {
display: flex;
justify-content: space-between;
}

.container,
.container2 {
border: 1px solid red;
width: 500px;
margin-bottom: 20px;
}

h2 {
margin-bottom: 5px;
}

p {
margin: 0 0 5px 0;
}

.container ul.first {
flex-grow: 1;
/* this works, but each element should only grow by 25px */
}

.container ul.first,
.container2 ul.first {
margin-right: 30px;
}

.container2 ul.first li {
margin-right: 25px;
/* this works, but should be reduced if not enough space */
}
<h2>Example 1: flex-grow on li</h2>
<p>Problem: the items get too big, should be max 25px spacing</p>
<div class=container>
<ul class=first>
<li>first</li>
<li>second</li>
<li>third</li>
<li>fourth</li>
<li>fifth</li>
<li>sixth</li>
</ul>
<ul class=second>
<li>first</li>
<li>second</li>
</ul>
</div>

<h2>Example 2: margin-right on li</h2>
<p>Problem: the spacing is not reduced on smaller containers</p>
<div class=container2>
<ul class=first>
<li>first</li>
<li>second</li>
<li>third</li>
<li>fourth</li>
<li>fifth</li>
<li>sixth</li>
</ul>
<ul class=second>
<li>first</li>
<li>second</li>
</ul>
</div>

最佳答案

一种想法是考虑使用伪元素和display:contents

ul,
li {
list-style: none;
margin: 0;
padding: 0;
}

ul{
display: inline-flex;
max-width:100%;
}

.container {
border: 1px solid red;
margin-bottom: 20px;
display:flex;
flex-wrap:wrap;
justify-content: space-between;
}

h2 {
margin-bottom: 5px;
}

p {
margin: 0 0 5px 0;
}


.container ul.first{
margin-right: 30px;
max-width:calc(100% - 30px);
}

ul li:not(:last-child) {
display:contents;
}
ul li:not(:last-child)::after {
content:"";
width:25px;
}
<div class=container>
<ul class=first>
<li>first</li>
<li>second</li>
<li>third</li>
<li>fourth</li>
<li>fifth</li>
<li>sixth</li>
</ul>
<ul class=second>
<li>first</li>
<li>second</li>
</ul>
</div>

关于html - flex-grow 最大值或缩小元素之间空间的边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60945140/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com