html - 如何让 flexbox 容器只延伸到最长的内部元素？

Question

我正在尝试创建一行 flex 容器，每个容器都有几行，其中一些可能是 1 或 2 列宽:https://jsfiddle.net/f6ot3vce/1/

这就是我配置样式的方式(1 个水平行的 infoboxes，每个 infobox 包含 1 行或多行单列或 2 列(2x 50% 宽)项。

.infoboxes {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.infobox {
  border: 2px solid;
  margin: 2px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 1px;
}

.infobox_item {
  flex-basis: 50%;
  align-self: flex-start;
}

.single_col {
  flex-basis: 100%;
}

但是我遇到了一个问题，即每个整体 flex 容器的宽度正在扩展以适合页面，而我更希望它适合每个容器的最长内部元素 - 而不再是(如果我清楚的话)示例)。

我需要做什么/改变什么？ (以保持每个容器的 2 列彼此对齐的方式)。

Answer 1

恐怕如果不借助 hack 和/或 JavaScript 辅助手段，纯粹使用 display: flex 实现这样的布局是不可能的。这是因为这里有两个“冲突”的规则:信息框项希望是父项的 100% 或 50%(因此子项宽度取决于父项宽度)，同时您希望信息框 (父级)以适应最长的信息框元素(因此父级宽度取决于子级宽度)

幸运的是，这种布局可以通过使用 css grid 实现.如果你可以不用 supported older browsers , 然后你可以得到如图所示的布局 a fork of your example ，或在下面的片段中:

.infoboxes {
  display: flex;
  flex-direction: row;
  background-color:orangered;
  align-items: flex-start;
}

.infobox {
  border: 2px solid;
  margin: 2px;
  display: grid;
  padding: 1px;
  background-color: cyan;
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
}

.infobox_item {
  margin: 1px;
  background-color: yellow;
}

.single_col {
  grid-column: span 2;
}

.center {
  text-align:center;
}

body {
  margin: 0;
  padding: 0;
  font-family: monospace;
  font-size: 12px;
}

  <section class="infoboxes">
    <div class="infobox">
      <a class="infobox_item single_col center" href="localhost">Infobox Item (Single Column) (Centered)</a>
      <div class="infobox_item single_col">Infobox Item (Single Column)</div>
      <div class="infobox_item">Infobox Item</div>
      <div class="infobox_item">Infobox Item</div>
      <div class="infobox_item">A Really Really Really Really long Infobox Item</div>
      <div class="infobox_item">Infobox Item</div>
      <div class="infobox_item">Infobox Item</div>
      <div class="infobox_item">Infobox Item</div>
      <div class="infobox_item single_col center">Infobox Item (Single Column) (Centered)</div>
      <div class="infobox_item single_col center">Infobox Item (Single Column) (Centered)</div>
      <a class="infobox_item center" href="localhost">Infobox Item (Centered)</a>
      <a class="infobox_item center" href="localhost">Infobox Item (Centered)</a>
    </div>
    <div class="infobox">
      <a class="infobox_item single_col center" href="localhost">Infobox Item (Single Column) (Centered)</a>
      <div class="infobox_item">Infobox Item</div>
      <div class="infobox_item">Infobox Item</div>
      <div class="infobox_item">Infobox Item</div>
      <div class="infobox_item">Infobox Item</div>
      <a class="infobox_item center" href="localhost">Infobox Item (Centered)</a>
      <a class="infobox_item center" href="localhost">Infobox Item (Centered)</a>
    </div>
  </section>

它基本上将 .infobox 类的 flex 布局更改为 grid，将其设置为具有两个等宽的列，删除 flex-basis 的 child 和全宽 child 设置网格列占用 2 个空格 (span 2)