Question

以下是该方案：

<!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，因为它仅适用于特定情况。

Answer 1

对于这种行为，

flex失败了：

Display:grid可以在这里做未来。

你的问题提到了三个要素：

教程https://css-tricks.com/snippets/css/complete-guide-grid/

浏览器支持http://caniuse.com/#search=grid

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>

此外，从已知数量的元素中，column CSS可能在这里很有用

.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>

在这两种情况下，display flex仅用于将第二个容器缩小为其内容。在该级别的父级，float或display:inline-block也会这样做。

Answer 2

请尝试这个，让我知道它是否有效。

.flex-container {
    display:flex;
    align-items: stretch;
    border: 1px solid black;
}

.flex-item {
    background-color: cornflowerblue;
    height: 1.7rem;
    width: 10rem;
    padding: 0 1.2rem;
    flex: 1 1 33.33333%;
    white-space: nowrap;
    max-width: 50%;
    flex-grow: 1;
    flex-basis: 0;
}

<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>

Answer 3

我将显示屏固定。只需给出一个固定宽度，它应该看起来就像你想要的那样。

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
    display: solid;
    border: 1px solid black;
}

.flex-item {
    background-color: cornflowerblue;
    height: 1.7rem;
    width: 10rem;
    padding: 0 1.2rem;
    flex: 1 1 33.33333%;
    white-space: nowrap;
    max-width: 50%;
}
</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 个答案: