如何根据最长内容项设置flex项目等宽？

Question

如何根据最长内容项设置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>

Run Code Online (Sandbox Code Playgroud)

按钮的大小相同，但问题是，他们没有根据与最长内容柔性项大小规模。相反，此处最后一个按钮的文本溢出。它是这样的：

这就是我想要的样子：

因此，简而言之，我想要3个宽度和高度相同的伸缩按钮，其中宽度应根据内容最长的按钮确定。另外，我宁愿只使用CSS（如果可能）执行此操作。

编辑：因为似乎有一些误解，我想澄清的是，宽度应该改变动态，并因此与工作的按钮给定的，不只是对如上任何文本。换句话说，您不能只width: 10rem为flex-item直接添加，因为它仅在特定情况下有效。

Answer 1

G-C*_*Cyr 6

flex 在这里失败了这种行为：

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

您的问题提到了 3 个要素：

教程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
  }
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

此外，从已知数量的元素来看，columnCSS 在这里可能很有用

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

在这两种情况下， ,display flex仅用于将第二个容器缩小到其内容。在块父级中， float或者display:inline-block在该级别也可以。

归档时间：	8 年，11 月前
查看次数：	1988 次
最近记录：	8 年，11 月前