相关疑难解决方法(0)
让 flex 具有与最宽元素等宽的列
我有一堆按钮，我希望它们都具有相同的宽度，而不必设置特定的宽度，所以自然地你会希望所有按钮的宽度采用最宽元素的宽度，但我很难使用 flex 来实现这一点，因为它似乎只是希望它们全部达到 100%；我还尝试在锚点周围使用包装纸，但这并没有帮助，因为当时按钮的宽度都是不同的。
代码笔： https://codepen.io/gutterboy/pen/MZWroj?editors =1100
因此，在该示例中，所有按钮都应与“Groundskeeping”的自然宽度相匹配。
HTML：
<div class="container">
<div class="row">
<div class="offset-md-4 col-md-4">
<div class="buttons">
<a href="" class="btn alt">Plumbing</a>
<a href="" class="btn alt">Electrical</a>
<a href="" class="btn alt">Groundskeeping</a>
<a href="" class="btn alt">Construction</a>
<a href="" class="btn alt">Cleaning</a>
<a href="" class="btn alt">Security</a>
<a href="" class="btn alt">Trades Assistant</a>
<a href="" class="btn alt">General Duties</a>
</div>
</div>
</div>
</div>
CSS：
.buttons {
display: flex;
flex-direction: column;
padding: 15px;
background-color: gray;
.btn {
display: block;
margin-bottom: 11px;
&:last-child {
padding-bottom: 21px;
} …7
推荐指数
推荐指数
1
解决办法
解决办法
2546
查看次数
查看次数
如何根据最长内容项设置flex项目等宽？
这是场景：
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
border: 1px solid black;
}
.flex-item {
background-color: cornflowerblue;
height: 1.7rem;
padding: 0 1.2rem;
flex: 1 1 33.33333%;
white-space: nowrap;
max-width: 33.33333%;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-container">
<button class="flex-item">Foo</button>
<button class="flex-item">Bar</button>
<button class="flex-item">Long ass text here</button>
</div>
</div>
</body>
</html>
按钮的大小相同，但问题是，他们没有根据与最长内容柔性项大小规模。相反，此处最后一个按钮的文本溢出。它是这样的：
这就是我想要的样子：
因此，简而言之，我想要3个宽度和高度相同的伸缩按钮，其中宽度应根据内容最长的按钮确定。另外，我宁愿只使用CSS（如果可能）执行此操作。
编辑：因为似乎有一些误解，我想澄清的是，宽度应该改变动态，并因此与工作的按钮给定的，不只是对如上任何文本。换句话说，您不能只width: 10rem为flex-item直接添加，因为它仅在特定情况下有效。
6
推荐指数
推荐指数
1
解决办法
解决办法
1988
查看次数
查看次数
最宽元素的宽度设置行中所有兄弟的宽度
我已经阅读了很多关于CSS弹性框和CSS网格的教程,但坦率地说,我只是无法弄清楚如何做这个简单的(？)事情.
我想要的只是容器中的元素都与最宽的元素一样宽.
我不希望它们填满容器的整个宽度,只是增长到最大宽度.可以用CSS完成吗？
考虑这个HTML:
<div class="container">
<button>a normal button</button>
<button>tiny</button>
<button>a really, really, really wide button</button>
</div>
这产生了这样的事情:
我想要的是这样的东西,它们是那个最宽按钮的宽度:
我不希望它们只是拉伸以填充页面的宽度:
可以这样做吗？如果是这样,上述HTML的CSS是什么？
3
推荐指数
推荐指数
2
解决办法
解决办法
664
查看次数
查看次数