如何在弹性容器中将项目与右侧对齐？ [英] How do I align an item to the right inside a flex container?

问题描述

我开始使用flex框，但不知道我如何设置一个flex容器内的元素位于右侧？我已经尝试应用 align-self：flex-end 和 justify-content：flex-end 我希望有人能帮助我。

I'm starting to use flex box but not sure how I set an element inside a flex container to be positioned on the right side? I've tried applying align-self: flex-end and justify-content: flex-end with no success so I'm hoping someone can help me out?

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

推荐答案

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

The align-self property is similar to the align-items property: it only changes its alignment on the cross axis (that's vertically when you're using the row direction). Not what you want here.

您可以使用justify-content属性。如果您有超过2个项目，它们将均匀分布，第一个项目一直到左边，最后一个项目一直到右边：

You can use the justify-content property. If you have more than 2 items, they will be evenly spaced out with the first item all the way to the left and the last item all the way to the right:

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

或者您可以使用margin-left方式向右。如果您有超过2个项目，它会将所有前面的项目一直向左移动：

Or you can use margin-left on the item you want to shift all the way to the right. If you have more than 2 items, it will shift all of the preceding items all the way to the left:

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

这篇关于如何在弹性容器中将项目与右侧对齐？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！