html - CSS - 如何排列 div 和文本

Question

我正在尝试将一些内容设置为如下图所示的样式:

我需要将Text Item 1和Text Item 3以及Text Item 2和Text item完全对齐4. .左侧和右侧元素之间应该有空间。

理想情况下，我想在 flexbox 中执行此操作，但即使在基本 css 中也可以工作，但我不明白如何执行此操作。

.outterBox {
  border: 1px solid black;
  padding: 20px;
}

.inline-block {
  display: inline-block; 
}

.temp {
  justify-content: space-between; 
}

<div class="outterBox">
  <div class="inline-block">
    <img src="https://404store.com/2017/12/08/Er-weird-O-o-random-23398022-600-678.jpg" width="50"/>
  </div>
  <div class="inline-block">
    <div>
      <span>Text Item 1</span>
      <span>Text Item 2</span>
    </div>
    <div>
      <span>Text Item 3</span>
      <span>Text Item 4</span>
    </div>
   </div>
</div>

Answer 1

在我看来，解决这个问题的最简单方法是使图像和两组文本成为同级。从这里开始，您需要做的就是将容器变成一个 flex 元素，并使其对齐并分隔子元素:

display: flex;
align-items: center;
justify-content: space-between;
text-align: center;

然后简单地给(直系) child 以下内容:

flex: 1;

这可以从以下内容看出:

.flex {
  border: 1px solid black;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: center;
}

.flex > * {
  flex: 1;
}

<div class="flex">
  <img src="https://404store.com/2017/12/08/Er-weird-O-o-random-23398022-600-678.jpg" width="50" />
  <div>
    <div>Text Item 1</div>
    <div>Text Item 2</div>
  </div>
  <div>
    <div>Text Item 3</div>
    <div>Text Item 4</div>
  </div>
</div>