css - align-self 不位于容器的末尾，它有空间可以这样做

Question

我不知道我做错了什么。我希望使用 flexbox 将“内容”一词放在容器的末尾。

|1|     content|

谢谢你。

这是我的实时代码：

https://jsfiddle.net/0tunwopb/1/

<div class="container">
  <div class="container_flex">
    <div>
      1
    </div>
    <div class="container_content">
      content
    </div>  
  </div>
</div>

.container{
  width:200px;
  height:200px;
  border:1px solid blue;
}

.container_flex{
  display:flex;
  flex-direction:row;
}

.container_flex div{
  border:1px solid red;
}

.container_content{
  flex-grow:1;
  align-self:flex-end;
}

谢谢

标签： css

Answer 1

该.container_content元素已经与 的右侧边缘齐平.container_flex。

如果您希望文本内容向右对齐，您正在寻找text-align: right：

.container {
  width: 200px;
  height: 200px;
  border: 1px solid blue;
}

.container_flex {
  display: flex;
  flex-direction: row;
}

.container_flex div {
  border: 1px solid red;
}

.container_content {
  flex-grow: 1;
  align-self: flex-end;
  text-align: right;
}

<div class="container">
  <div class="container_flex">
    <div>
      1
    </div>
    <div class="container_content">
      content
    </div>
  </div>
</div>