Как выровнять во flex?

Question

[DrunkMaster]

Есть демо https://jsfiddle.net/u46vtd8f/1/ в ней HTML

<div class="top">
				<div class="one">
					Раз
				</div>
				<div class="one">
					Два
				</div>
				<div class="one">
					Три
				</div>
</div>

CSS

.top{
  background-color: gray;
  height: 6rem;
  margin: 1.5rem 0rem;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.one{
  color: red;
  width: 50%;
  font-size: 2rem;
}

По вертикали выравнивается всё правильно (по центру). Как сделать так что бы по ширине они вели себя так де как display: inline, т.е. следующий пункт меню начинался сразу как закончится предыдущий? А не расползались равномерно по всей ширине?

Comments

[Ankhena]

следующий пункт меню начинался сразу как закончится предыдущий

У вас они именно так себя и ведут. Сделайте бордер и увидите.
А на всю ширину, потому что вы задали им ширину 50%.

[DrunkMaster]

Ankhena, O'really? Так вот же он правильный ответ ))

[Ankhena]

DrunkMaster, :)

[DrunkMaster]

Ankhena, я просто думал это 50% от верха, типа середина по высоте

Answer 1

[Максим]

у вас flex , не float
https://jsfiddle.net/u46vtd8f/2/

Comments

[DrunkMaster]

С фиксированным margin:15px; не катит...

[Максим]

justify content space-around / space-between

Answer 2

[Anton Filippov]

убрать width: 50%
https://jsfiddle.net/u46vtd8f/4/

если нужно оставить отзывы между пунктами меню добавить маргин с нужным значением
https://jsfiddle.net/u46vtd8f/5/