时间戳

首页 > 解决方案 > CSS：带有 inline-flex 的“宽度：自动”容器的行为规则是什么？

html - CSS：带有 inline-flex 的“宽度：自动”容器的行为规则是什么？

问题描述

我试图使用 flexbox 创建具有动态宽度的列表/表格视图，但遇到了一种我无法真正理解的行为。我试图达到的结果是一个适合列表内容的宽度，在其最宽处。

.main {
  width: auto;
  background: rgb(233, 148, 148);
  display: inline-flex;
  flex-wrap: wrap;
}

.container {
  display: flex;
  width: 100%;
}

.label,
.value {
  flex: 1;
  padding: 4px;
}

.label {
  text-align: end;
  border-right: 2px solid red;
}

.value {
  text-align: start;
}
<div>
  <div class="main">
    <div class="container">
      <div class="label">Some Label</div>
      <div class="value">Some value</div>
    </div>
    <div class="container">
      <div class="label">Some label 2</div>
      <div class="value">Other val</div>
    </div>
    <div class="container">
      <div class="label">Third label</div>
      <div class="value">
        <div>N/A</div>
      </div>
    </div>
  </div>
</div>

归根结底，宽度似乎是由总字符数决定的，而不是我所期望的最宽点。例如，您可以编辑 HTML 并删除 N/A，宽度会减小。

当我切换到display: inline-blockwithwhite-space: nowrap时，宽度与预期一致，但“列”未对齐。

.main {
  width: auto;
  background: rgb(233, 148, 148);
  display: inline-block;
  white-space: nowrap;
}

.container {
  display: flex;
  width: 100%;
}

.label,
.value {
  flex: 1;
  padding: 4px;
}

.label {
  text-align: end;
  border-right: 2px solid red;
}

.value {
  text-align: start;
}
<div>
  <div class="main">
    <div class="container">
      <div class="label">Some Label</div>
      <div class="value">Some value</div>
    </div>
    <div class="container">
      <div class="label">Some label 2</div>
      <div class="value">Other val</div>
    </div>
    <div class="container">
      <div class="label">Third label</div>
      <div class="value">
        <div>N/A</div>
      </div>
    </div>
  </div>
</div>

是什么原因导致显示时出现大宽度inline-flex？有没有办法获得我想要实现的行为？我知道它可能可以解决display: grid，但我正在寻找一个更简单的解决方案。

标签： htmlcssflexboxwidthdisplay

解决方案

我知道它可能可以通过 display: grid 来解决，但我正在寻找一个更简单的解决方案。

如果您还没有很好地处理网格布局可能会很困难，但是如果您使用网格系统，它看起来并没有那么复杂；）

对于宽度，请查看max-content。

简单的例子：

.main {
  width: max-content;
  background: rgb(233, 148, 148);
}

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.label,
.value {
  padding: 4px;
}

.label {
  text-align: end;
  border-right: 2px solid red;
}

.value {
  text-align: start;
}
<div>
  <div class="main">
    <div class="container">
      <div class="label">Some Label</div>
      <div class="value">Some value</div>
    </div>
    <div class="container">
      <div class="label">Some label 2</div>
      <div class="value">Other val</div>
    </div>
    <div class="container">
      <div class="label">Third label</div>
      <div class="value">
        <div>N/A</div>
      </div>
    </div>
  </div>
</div>

过去，before &flex会使用表格布局。griddisplay

.main {
      display:table;
      background: rgb(233, 148, 148);
    }
  .container {
    display: table-row;
  }
  .label, .value {
    padding: 4px;
    display:table-cell;
  }
  .label {
    text-align: end;
    border-right: 2px solid red;
  }
  .value {
    text-align: start;
  }
<div>
  <div class="main">
    <div class="container">
      <div class="label">Some Label</div>
      <div class="value">Some value</div>
    </div>
    <div class="container">
      <div class="label">Some label 2</div>
      <div class="value">Other val</div>
    </div>
    <div class="container">
      <div class="label">Third label</div>
      <div class="value">
        <div>N/A</div>
      </div>
    </div>
  </div>
</div>

推荐阅读