Flex：并排对齐两个项目，没有最大宽度

Question

我不知道这是否可以使用 flex，但我需要的是一个并排有两个项目的列表，每个项目的宽度取决于内容。喜欢这里：

<div class="items">
  <div class="item">Item 1 with text</div>
  <div class="item">Item 2 with more text</div>
  <div class="item">Item 3 with some text</div>
  <div class="item">Item 4 without text</div>
  <div class="item">Item 5 lorem</div>
  <div class="item">Item 6 ipsum</div>
  <div class="item">Item 7 with lorem</div>
  <div class="item">Item 8 with ipsum</div>
</div>

.items {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.item {
  align-self: flex-end;
  box-sizing: border-box;
  background: #e0ddd5;
  color: #171e42;
  padding: 10px;
}

.item:nth-child(even) {
  background-color: darkgrey;
}

我怎么能意识到无论我有多少 li 项目，总是有两个项目并排？没有限制宽度的外部容器。我不想使用浮动。是否有使用网格模板列的灵活解决方案？

像这样的最终结果（但向右对齐）：

Answer 1

你试过css列吗？

.items {
  columns: 2
}

<div class="items">
  <div class="item">Item 1 with text</div>
  <div class="item">Item 2 with more text</div>
  <div class="item">Item 3 with some text</div>
  <div class="item">Item 4 without text</div>
  <div class="item">Item 5 lorem</div>
  <div class="item">Item 6 ipsum</div>
  <div class="item">Item 7 with lorem</div>
  <div class="item">Item 8 with ipsum</div>
</div>

Answer 2

如果float 被禁止，我有一个简单的解决方案给你！ :)
我们将使用inline、block、:nth-child 和::after。

我们去：

.item {
  display: inline;
}

.item:nth-child(2n)::after {
  display: block;
  content: '';
}

<div class="items">
  <div class="item">Item 1 with text</div>
  <div class="item">Item 2 with more text</div>
  <div class="item">Item 3 with some text</div>
  <div class="item">Item 4 without text</div>
  <div class="item">Item 5 lorem</div>
  <div class="item">Item 6 ipsum</div>
  <div class="item">Item 7 with lorem</div>
  <div class="item">Item 8 with ipsum</div>
</div>

简单，不是吗？

Answer 3

除了theAlexandrian's 答案之外，如果您可以添加内部包装器，这里有一个选项，您可以使用内部div，显示为inline-block，用于样式，例如填充等。

由于我们处理的是内联元素，它们和字符一样，可以在它们之间有一个空格。一种方法是使用负边距将其取出，这里有几个选项：

• How do I remove the space between inline-block elements?

注意，由于空间宽度是基于字体的，负边距可能需要调整。

---

堆栈sn-p

.items {
  text-align: right;
}

.item {
  display: inline;
  margin-right: -4px;        /*  take out inline element space  */
}

.item div {
  display: inline-block;
  background: #e0ddd5;
  color: #171e42;
  padding: 10px;
}

.item:nth-child(even) div {
  background-color: darkgrey;
}

.item:nth-child(even)::after {
  content: '\A';
  white-space: pre;
}

<div class="items">
  <div class="item"><div> Item 1 with text </div></div>
  <div class="item"><div> Item 2 with more text </div></div>
  <div class="item"><div> Item 3 with some text </div></div>
  <div class="item"><div> Item 4 without text </div></div>
  <div class="item"><div> Item 5 lorem </div></div>
  <div class="item"><div> Item 6 ipsum </div></div>
  <div class="item"><div> Item 7 with lorem </div></div>
  <div class="item"><div> Item 8 with ipsum </div></div>
</div>