Question

我有一个简单的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元素，并且我需要图标左右对齐。

我希望我可以给span元素提供100％的宽度，但是由于默认的行方向不起作用。

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

Answer 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会将元素定位为Left-> Right，这不是您想要的。

在上述情况下，您的容器上的Flex并没有做什么用，主要是加强宽度。

理想情况下，您希望添加一个弹性方向：

替代解决方案：

保持HTML不变，并使用以下CSS：

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

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

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

1 个答案: