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课程

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

你可以摆脱align-self

Answer 2

@EdDogan的回答是正确的。我的答案扩展了他的解决方案，并附有解释。

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

然后，要对齐相对边缘上的弹性项目，中间有一个，请使用justify-content: space-between，这对于此要求是完美的（并且沿着垂直轴工作，因为flex-direction是{{1 }}）。

column

Revised Codepen

更多笔记：

如果中间项只需要存在于其他两项之间，则.text-container { display: flex; /* new */ justify-content: space-between; /* new */ flex-direction: column; }（或justify-content: space-between）可以正常工作。

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

有关详细信息，演示和解决方法，请参阅此处的方框＃76：https://stackoverflow.com/a/33856609/3597276
关于：
```
flex-direction: row
```
当您建立一个弹性容器（通过将.container { /* flex-direction: row; no effect */ }或display: flex应用于元素）时，几个默认规则将生效。其中一条规则是display: inline-flex。因此，您自己对此规则的声明是多余的，并且不起作用。
关于：
```
flex-direction: row
```
这不起作用的第一个原因是因为这些元素的父元素不是flex容器。 .text1 { align-self: flex-start; } .text3 { align-self: flex-end; }未应用.text-container，因此会忽略子元素的任何弹性属性。

它不起作用的第二个原因是，即使应用了display: flex，您也在display: flex。这意味着横轴是水平的，flex-direction: column属性控制左/右柔性项目，而不是向上/向下。

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

2 个答案: