在不使用 flex-col 的情况下对齐 2 个元素

【问题标题】：Align 2 elements underneath each other without using flex-col在不使用 flex-col 的情况下对齐 2 个元素
【发布时间】：2021-02-18 16:13:03
【问题描述】：

我有一个简单的 html div：

<div class="container">
  <div class="icon1">+</div>
  <span>Label</span>
  <span>Context</span>
  <div class="icon2">X</div>
</div>

.container {
  display: flex;
  width: 500px;
}

.icon1, .icon2 {
  background: red;
  border-radius: 50%;
  padding: 8px;
  color: #fff;
}

.icon2 {
  margin-left: auto;
}

我想在彼此下方对齐 span 元素，但我不想添加额外的 html 元素，我需要图标左右对齐。

我希望我可以给跨度元素一个 100% 的宽度，但由于默认的行方向不起作用。

https://codepen.io/alucardu/pen/PozBgoR

【问题讨论】：

标签： css flexbox

【解决方案1】：

你可以在你的第一个元素块周围添加一个 div：

  <div class="container">
      <div>
       <div class="icon1">+</div>
        <span>Label</span>
        <span>Context</span>
      <div>
      <div class="icon2">X</div>
    </div>

这将在不使用 Flex-direction: 列的情况下堆叠您的两个元素。

这是可行的，因为 Div 默认带有 Display: Block，它为您提供堆叠的元素。 Flex 默认会将元素定位在左 -> 右，这不是你想要的。

在上述情况下，您的容器上的 Flex 并没有做太多，主要只是强制一个宽度。

理想情况下，您应该添加一个 flex-direction：

替代解决方案：

保持你的 HTML 不变，并使用这个 CSS：

.container {
      display: flex;
      flex-direction: column;
      width: 500px;
    }

    .icon1, .icon2 {
      background: red;
      border-radius: 50%;
      padding: 8px;
      color: #fff;
      width: 20px;
    }

【讨论】：