如何使用 flex 在 div 之间放置 space？

Question

这是我希望通过 display:flex 实现的那种展示位置。我希望 text1 出现在顶部，text3 出现在底部，text2 出现在中间。

然而我得到的最终结果是这样的：

我期待 align-self 能够将顶部和底部 div 拉向两端。

我错过了什么？

HTML:

<div class=container>

  <div class='logo-container hidden-xs'>
    <span>LOGO on the side</span>
  </div>
  <div class='text-container' > 
    <div class='visible-xs'>
      <span>LOGO</span>
    </div>
    <div class=text1>
      Text1
    </div>
    <div class=text2>
      Text 2
    </div>
    <div class=text3>
      Text 3
    </div>
  </div>  

</div>

css:

.container {
  display: flex;
  /* flex-direction: row;  no effect */
  border: 1px;
  border-style: solid;
  height: 300px;
}

.container span {
  padding: 5px;
  border: 1px;
  border-style: solid;
  border-color: blue;
}

.text-container {
  flex-direction: column;
  border: 1px;
  border-style: solid;
  border-color: red;
}

.do-i-need-this {
  display: flex;
  flex-direction: row;
} 

.text1 {
  align-self: flex-start;  
  border: 1px;
  border-style: solid;
  border-color: green;

}

.text2 {

  border: 1px;
  border-style: solid;
  border-color: green;

}


.text3 {
  align-self: flex-end;
  border: 1px;
  border-style: solid;
  border-color: green;
}

Answer 1

将这些添加到您的 text-container class

display: flex;
justify-content: space-between;

你可以去掉align-self

Answer 2

@EdDogan 的回答是正确的。我的回答通过解释扩展了他的解决方案。

您实现布局所面临的主要障碍是文本元素缺少弹性容器。换句话说，.text-container 必须应用 display: flex 才能使 flex 属性在子元素上起作用。

然后，为了对齐相对边上的弹性项目，一个在中间，使用 justify-content: space-between，这非常适合这个要求（并且沿着垂直轴工作，因为 flex-direction 是 column).

.text-container {
    display: flex; /* new */
    justify-content: space-between; /* new */
    flex-direction: column;
}

Revised Codepen

补充几点：

如果中间项只需要存在于其他两项之间，则 justify-content: space-between（或 space-around）可以正常工作。

但是，如果中间项目需要在容器中居中，则justify-content方法仅在所有项目高度相同时才有效。如果任何项目具有不同的高度（或宽度，在 flex-direction: row 中），这将导致不平衡，并且居中将关闭。

有关更多详细信息、演示和解决方法，请参阅此处的方框 #76：
关于：
```
.container {   /* flex-direction: row;  no effect */ }
```
当您建立弹性容器时（通过将 display: flex 或 display: inline-flex 应用于元素），一些默认规则会生效。这些规则之一是 flex-direction: row。因此，您自己声明此规则是多余的，不会有任何效果。
关于：
```
.text1 { align-self: flex-start; }

.text3 { align-self: flex-end; }
```
这不起作用的第一个原因是这些元素的父元素不是弹性容器。 .text-container 没有应用 display: flex，因此忽略子元素上的任何 flex 属性。

它不起作用的第二个原因是，即使应用了 display: flex，您仍然处于 flex-direction: column。这意味着 cross-axis 是水平的，align- 属性控制弹性项目 left/right，而不是 up/down.

如何使用 flex 在 div 之间放置 space？

How to put even space between divs using flex?

html

css

flexbox