Выравнивание предметов внутри 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 у меня почему-то не сработал.

• Речь идет, конечно, о гибкости. Не выравнивать это любой ценой.

• Я хочу иметь возможность изменять только .two, не касаясь других элементов.

Возможно ли это с помощью flex?

Answer 1

Просто настройте поля .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>