如何将一个项目与flexbox正确对齐? [英] How can I align one item right with flexbox?

问题描述

https://jsfiddle.net/vhem8scs/

是否有两个项目可以与flexbox左对齐，而一个项目可以与flexbox右对齐?该链接将更清楚地显示它.最后一个例子是我想要实现的.

Is it possible to have two items align left and one item align right with flexbox? The link shows it more clearly. The last example is what I want to achieve.

在flexbox中，我有一块代码.使用float时，我有四个代码块.这就是为什么我更喜欢flexbox的原因之一.

In flexbox I have one block of code. With float I have four blocks of code. That is one reason why I prefer flexbox.

HTML

<div class="wrap">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

<!-- DESIRED RESULT -->

<div class="result">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

CSS

.wrap {
  display: flex;
  background: #ccc;
  width: 100%;
  justify-content: space-between;
}

.result {
  background: #ccc;
  margin-top: 20px;
}

.result:after {
  content: '';
  display: table;
  clear: both;
}

.result div {
  float: left;
}
.result div:last-child {
  float: right;
}

推荐答案

要将一个flex子对象向右对齐，请使用 margin-left:auto;

To align one flex child to the right set it withmargin-left: auto;

来自弹性规格:

主轴上自动边距的一种用法是分隔弹性项目分成不同的组".以下示例显示了如何使用它来重现常见的UI模式-单个操作栏上有一些在左侧对齐，其他在右侧对齐.

One use of auto margins in the main axis is to separate flex items into distinct "groups". The following example shows how to use this to reproduce a common UI pattern - a single bar of actions with some aligned on the left and others aligned on the right.

.wrap div:last-child {
  margin-left: auto;
}

更新的小提琴

.wrap {
  display: flex;
  background: #ccc;
  width: 100%;
  justify-content: space-between;
}
.wrap div:last-child {
  margin-left: auto;
}
.result {
  background: #ccc;
  margin-top: 20px;
}
.result:after {
  content: '';
  display: table;
  clear: both;
}
.result div {
  float: left;
}
.result div:last-child {
  float: right;
}

<div class="wrap">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

<!-- DESIRED RESULT -->
<div class="result">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

注意:

您可以通过在中间flex项目(或简写 flex:1 )上设置flex-grow:1来达到类似的效果，这会将最后一个项目一直推到右边.( 演示 )

You could achieve a similar effect by setting flex-grow:1 on the middle flex item (or shorthand flex:1) which would push the last item all the way to the right. (Demo)

然而，明显的区别是中间项变得比可能需要的大.在弹性项目上添加边框以查看差异.

The obvious difference however is that the middle item becomes bigger than it may need to be. Add a border to the flex items to see the difference.

.wrap {
  display: flex;
  background: #ccc;
  width: 100%;
  justify-content: space-between;
}
.wrap div {
  border: 3px solid tomato;
}
.margin div:last-child {
  margin-left: auto;
}
.grow div:nth-child(2) {
  flex: 1;
}
.result {
  background: #ccc;
  margin-top: 20px;
}
.result:after {
  content: '';
  display: table;
  clear: both;
}
.result div {
  float: left;
}
.result div:last-child {
  float: right;
}

<div class="wrap margin">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

<div class="wrap grow">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

<!-- DESIRED RESULT -->
<div class="result">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

这篇关于如何将一个项目与flexbox正确对齐?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！