Aligning items inside of the flexbox

Question

I can't figure it out. If I have something like this:

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>

Then, how would I change the .two, so it would be exactly after the .one without spacing? The self-align didn't work for me, for some reason.

• It's about flex, of course. Not aligning it at all cost.

• I want to be able to change only the .two, without touching the other elements.

Is this possible using flex?

Answer 1

Simply adjust the margin of the .two:

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;
}

<div class="cont">

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

</div>