如何根据内容最长的项目将柔性项目设置为等宽？
[英] How to set flex items to equal width according to the item with the longest content?
本文介绍了如何根据内容最长的项目将柔性项目设置为等宽？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
以下是方案：
<！DOCTYPE html>
< html>
< head>
< style>
.flex-container {
display：flex;
border：1px纯黑色;
}
.flex-item {
background-color：cornflowerblue;
身高：1.7rem;
填充：0 1.2rem;
flex：1 1 33.33333％;
white-space：nowrap;
最大宽度：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>长屁股文字< /按钮>
< / div>
< / div>
< / body>
< / html>
这些按钮的大小相同，但问题在于它们的大小没有根据弹性项目的内容最长。相反，最后一个按钮的文本溢出。这是它的样子：
和这就是我想要的样子：
<总而言之，我想要
具有相同宽度和高度的3个弹性按钮，其中宽度应该根据最长内容的按钮来确定。此外，我宁愿这样做与CSS只（如果可能的话）。
编辑：因为似乎有一些误解，我我想澄清一下，宽度应该改变动态，因此可以处理为按钮提供的任何文本，而不仅仅是上面显示的文本。换句话说，你不能只是添加例如 width：10rem 直接用于flex-item，因为它只适用于特定情况。
>
$ b pre $ c $>显示：grid 在这里可以做到这一点。
你的问题提到3个元素：
教程 https://css-tricks.com/snippets/css/complete-guide-grid/
浏览器支持 http：// caniuse。 com /＃search = grid
a Polyfill https://github.com/FremyCompany/css-grid-polyfill/
http://gridbyexample.com/browsers/
.flex-container {display：flex;边框：1px纯黑色; margin：1em;}。flex-container .flex-container {display：grid; grid-template-columns：1fr 1fr 1fr;}。flex-item {background-color：cornflowerblue;身高：1.7rem;填充：0 1.2rem;宽度：100％;如果你想使用这个方法，你可以使用下面的代码来实现这个功能： prettyprint-override> < p class =disclosure> grid CSS似乎不支持您的浏览器< / p>< div class =flex-container> < div class =flex-container> < button class =flex-item> Foo< / button> < button class =flex-item> Bar< / button> < button class =flex-item>长屁股文字< /按钮> < / div>< / div>< div class =flex-container> < div class =flex-container> < button class =flex-item> Foo< / button> < button class =flex-item> Bar< / button> < button class =flex-item>长文字&长文字在这里< / button> < / div>< / div>
$ b $ hr b
此外，从已知数量的元素中，列 CSS在这里可能是有用的
.flex-container {display：-webkit-box;显示：-ms-flexbox;显示：flex;边框：1px纯黑色; margin：1em;}。flex-container .flex-container {display：block; -moz列数：3; -moz柱 - 间隙：0; -webkit列数：3;列数：3; -webkit柱 - 间隙：0; column-gap：0;}。flex-item {background-color：cornflowerblue;身高：1.7rem;填充：0 1.2rem;宽度：100％; < div class =
柔性容器> < div class =flex-container> < button class =flex-item> Foo< / button> < button class =flex-item> Bar< / button> < button class =flex-item>长屁股文字< /按钮> < / DIV> < / DIV> < div class =flex-container> < div class =flex-container> < button class =flex-item> Foo< / button> < button class =flex-item> Bar< / button> < button class =flex-item>长屁股文字在这里长屁股文字< /按钮> < / DIV> < / div>
$ b
c> display flex 仅用于将第二个容器缩小到其content.in块父， float 或 display： inline-block 在这个级别也可以。
Here's the scenario:
<!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>
The buttons are the same size but the problem is that they don't scale in size according to the flex item with longest content. Instead, the text of the last button here overflows. This is how it looks like:
And this is how I want it to look like:
So in short, I want 3 flex buttons with same width and height where the width should be determined according to button with the longest content. Also, I'd rather do this with CSS only (if it's possible).
EDIT: Because there seems to be some misunderstandings, I would like to clarify that the width should change dynamically and thus work with any texts given for the buttons, not just with the ones shown above. In other words, you can't just add e.g. width: 10rem for flex-item directly because it only works in specific situation.
解决方案
flex fails here for this kind of behavior :
Display:grid could do in the futur here.
Your question mention 3 elements:
A tutorial https://css-tricks.com/snippets/css/complete-guide-grid/
browser supports http://caniuse.com/#search=grid
a Polyfill https://github.com/FremyCompany/css-grid-polyfill/
http://gridbyexample.com/browsers/
.flex-container {
display: flex;
border: 1px solid black;
margin: 1em;
}
.flex-container .flex-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.flex-item {
background-color: cornflowerblue;
height: 1.7rem;
padding: 0 1.2rem;
width: 100%;
white-space: nowrap;
}
@supports (display: grid) {
.discl {
display: none
}
}
<p class="discl"> grid CSS seems not supported by your browser</p>
<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>
<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 text & Long text here</button>
</div>
</div>
Also, from a known amount of elements, column CSS might be usefull here
.flex-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
border: 1px solid black;
margin:1em;
}
.flex-container .flex-container {
display:block;
-moz-column-count:3;
-moz-column-gap:0;
-webkit-column-count:3;
column-count:3;
-webkit-column-gap:0;
column-gap:0;
}
.flex-item {
background-color: cornflowerblue;
height: 1.7rem;
padding: 0 1.2rem;
width: 100%;
white-space: nowrap;
}
<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>
<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 Long ass text here</button>
</div>
</div>
In both cases , display flex is only usefull to shrink second container to its content.in a block parent, float or display:inline-block at that level would do too.
这篇关于如何根据内容最长的项目将柔性项目设置为等宽？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
