对齐flexbox内的项目

Question

我无法理解。如果我有这样的事情：

html,body,div {margin:0;padding:0;}
.cont {
  display: flex;
  justify-content: space-between;
  height: 100px;
  background: #eee;
}
.one, .two, .three {width: 150px;}
.one {
  background: #009;
}
.two {
  background: #090;
}
.three {

  background: #900;
}

<div class="cont">

  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>

</div>

那么，我如何更改.two，那么它会恰好在没有间距的.one之后？由于某种原因，self-align对我不起作用。

• 当然，这是关于flex的。不要不惜一切代价对齐它。

• 我希望能够更改 .two，而不会触及其他元素。

这是否可以使用flex？

Answer 1

只需调整.two：

的边距即可

＆＃13;

＆＃13;

html,
body,
div {
  margin: 0;
  padding: 0;
}

.cont {
  display: flex;
  height: 100px;
  background: #eee;
  /* removed this
  justify-content: space-between;*/
}

.one,
.two,
.three {
  width: 150px;
}

.one {
  background: #009;
}

.two {
  background: #090;
  margin-right: auto; /*added this*/
}

.three {
  background: #900;
}

＆＃13;

<div class="cont">

  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>

</div>

＆＃13;

＆＃13;

＆＃13;