Как правильно выровнять элемент flex?

Есть ли более гибкий способ для выравнивания «Контакта» по правому краю, чем использовать position: absolute?

.main { display: flex; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }
.b { flex: 1; text-align: center; }
.c { position: absolute; right: 0; }

<h2>With title</h2>
<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <!--<div class="b"><a href="#">Some title centered</a></div>-->
    <div class="c"><a href="#">Contact</a></div>
</div>

http://jsfiddle.net/vqDK9/

Ну вот. Установите justify-content: space-betweenна гибкий контейнер.

.main { 
    display: flex; 
    justify-content: space-between;
  }
.a, .b, .c { background: #efefef; border: 1px solid #999; }
.b { text-align: center; }

<h2>With title</h2>
<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
    <div class="a"><a href="#">Home</a></div>
<!--     <div class="b"><a href="#">Some title centered</a></div> -->
    <div class="c"><a href="#">Contact</a></div>
</div>

Более гибкий подход заключается в использовании autoлевого поля (элементы flex обрабатывают автоматические поля несколько иначе, чем при использовании в контексте форматирования блока).

.c {
    margin-left: auto;
}

Обновленная скрипка:

.main { display: flex; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }
.b { flex: 1; text-align: center; }
.c {margin-left: auto;}

<h2>With title</h2>
<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <!--<div class="b"><a href="#">Some title centered</a></div>-->
    <div class="c"><a href="#">Contact</a></div>
</div>
<h1>Problem</h1>
<p>Is there a more flexbox-ish way to right align "Contact" than to use position absolute?</p>

Если вы хотите использовать Flexbox для этого, вы должны быть в состоянии, при этом ( display: flexна контейнере, flex: 1по пунктам, и text-align: rightна .c):

.main { display: flex; }
.a, .b, .c {
    background: #efefef;
    border: 1px solid #999;
    flex: 1;
}
.b { text-align: center; }
.c { text-align: right; }

... или, альтернативно (даже проще), если элементы не должны встречаться, вы можете использовать justify-content: space-betweenконтейнер и полностью удалить text-alignправила:

.main { display: flex; justify-content: space-between; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }

Вот демонстрация на Codepen, чтобы вы могли быстро попробовать выше.

Вы также можете использовать заполнитель, чтобы заполнить оставшееся пространство.

<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="filler"></div>
    <div class="c"><a href="#">Contact</a></div>
</div>

.filler{
    flex-grow: 1;
}

Я обновил решение с 3 различными версиями. Это из-за обсуждения обоснованности использования дополнительного элемента-заполнителя. Если вы запускаете фрагмент кода, вы видите, что все решения делают разные вещи. Например, установка класса заполнителя для элемента b заставит этот элемент заполнить оставшееся пространство. Преимущество этого заключается в том, что нет «мертвого» пространства, на которое нельзя нажать.

<div class="mainfiller">
    <div class="a"><a href="#">Home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="filler"></div>
    <div class="c"><a href="#">Contact</a></div>
</div>

<div class="mainfiller">
    <div class="a"><a href="#">Home</a></div>
    <div class="filler b"><a href="#">Some title centered</a></div>
    <div class="c"><a href="#">Contact</a></div>
</div>



<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="c"><a href="#">Contact</a></div>
</div>

<style>
.main { display: flex; justify-content: space-between; }
.mainfiller{display: flex;}
.filler{flex-grow:1; text-align:center}
.a, .b, .c { background: yellow; border: 1px solid #999; }
</style>

Или вы могли бы просто использовать justify-content: flex-end

.main { display: flex; }
.c { justify-content: flex-end; }

Так же легко, как

.main {
    display: flex;
    flex-direction:row-reverse;
}

Добавьте следующий класс CSS в вашу таблицу стилей:

.my-spacer {
    flex: 1 1 auto;
}

Поместите пустой элемент между элементом слева и элементом, который вы хотите выровнять по правому краю:

<span class="my-spacer"></span>

Если вам нужно выровнять один элемент по левому краю (например, заголовок), а затем выровнять несколько элементов по правому краю (например, 3 изображения), то вы должны сделать что-то вроде этого:

h1 {
   flex-basis: 100%; // forces this element to take up any remaining space
}

img {
   margin: 0 5px; // small margin between images
   height: 50px; // image width will be in relation to height, in case images are large - optional if images are already the proper size
}

Вот как это будет выглядеть (в приведенный выше фрагмент кода был включен только соответствующий CSS)

'justify-content: flex-end' работал в контейнере ценовой коробки.

.price-box {
    justify-content: flex-end;
}

Я считаю, что добавление justify-content: flex-end к контейнеру flex решает проблему, в то время как justify-content: space -ween ничего не делает.

Для тех, кто использует Angular и Flex-Layout, используйте следующее для контейнера flex-item:

<div fxLayout="row" fxLayoutAlign="flex-end">

Смотрите документацию fxLayoutAlign здесь и полную документацию fxLayout здесь .

Пример кода на основе ответа от TetraDev

Изображения справа:

* {
  outline: .4px dashed red;
}

.main {
  display: flex;
  flex-direction: row;
  align-items: center;
}

h1 {
  flex-basis: 100%;
}

img {
  margin: 0 5px;
  height: 30px;
}

<div class="main">
  <h1>Secure Payment</h1>
  <img src="https://i.stack.imgur.com/i65gn.png">
  <img src="https://i.stack.imgur.com/i65gn.png">
</div>

Изображения слева:

* {
  outline: .4px dashed red;
}

.main {
  display: flex;
  flex-direction: row;
  align-items: center;
}

h1 {
  flex-basis: 100%;
  text-align: right;
}

img {
  margin: 0 5px;
  height: 30px;
}

<div class="main">
  <img src="https://i.stack.imgur.com/i65gn.png">
  <img src="https://i.stack.imgur.com/i65gn.png">
  <h1>Secure Payment</h1>
</div>