如何在Flex容器内右侧对齐项目？

Question

我开始使用柔性盒但是不确定如何在柔性容器内设置一个位于右侧的元件？我尝试过申请align-self: flex-end并justify-content: flex-end没有成功,所以我希望有人可以帮助我吗？

CSS

.ctn {
  background: lightblue;
  height: 100px;
  padding: 10px;
  display: flex;
  align-items: center;
}

.btn {
  outline: none;
  border: none;
  color: navy;
  background: lightyellow;
  height: 50px;
  line-height: 50px;
  width: 200px;
  text-transform: uppercase;
}

Codepen: http ://codepen.io/styler/pen/pvJFA

Answer 1

align-self属性类似于align-items属性:它只改变它在十字轴上的对齐方式(当你使用行方向时它是垂直的).不是你想要的.

您可以使用justify-content属性.如果您有两个以上的项目,它们将均匀分布,第一个项目一直向左,最后一个项目一直向右:

.ctn {
  background: lightblue;
  height: 100px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

或者您可以在想要一直向右移动的项目上使用margin-left.如果您有两个以上的项目,它会将所有前面的项目一直移到左侧:

.btn {
  outline: none;
  border: none;
  color: navy;
  background: lightyellow;
  height: 50px;
  line-height: 50px;
  width: 200px;
  text-transform: uppercase;
  margin-left: auto;
}