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

Question

I have a simple 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;
}

I want to align the span elements underneath each other but I don't want to add extra html elements and I need the icons to align left and right.

I was hoping I could give the span elements a 100% width but because of the default row direction that's not working.

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

Answer 1

You can just add a div around your first block of elements:

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

this will stack your two elements without using Flex-direction: column.

This works because Div's come default with Display: Block which gives you stacked elements. Flex by default will position elements Left -> Right, which is not what you want.

Flex in the above case on your container isn't doing much, mainly just enforcing a width.

Ideally, you would want to add a flex-direction:

Alternative solution:

Keep your HTML the same, and use this CSS:

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

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