Question

我正在尝试创建一行flex容器，每行包含几行，其中一些行的宽度可能为1或2列：https://jsfiddle.net/f6ot3vce/1/

这是我配置样式的方式（infobox的1个水平行，每个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%;
}

但是，我遇到了一个问题，即每个弹性容器的宽度都在扩展以适合页面，当我希望它可以适合每个容器的最长内部元素时-不再（如果我清楚例如）。

我需要做什么/更改？（以使每个容器的2列彼此对齐的方式。

Answer 1

恐怕仅靠display: flex来实现这种布局而不用黑客和/或JavaScript拐杖是不可能的。这是因为有两个“冲突”规则在这里起作用：信息框项希望是父级的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>

它基本上将flex类的.infobox布局更改为grid，将其设置为具有两个相等宽度的列，删除flex-basis的子级并保留整个宽度子元素，它将网格列设置为占用2个空格（span 2）

如何使flexbox容器仅扩展到最长的内部项目？

1 个答案: