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

Ответ 1

Здесь вы идете. Установите 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>

Ответ 2

Более гибкий подход заключается в использовании 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>

Ответ 3

Если вы хотите использовать 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; }

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

Ответ 4

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

<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 различными версиями. Это из-за обсуждения действительности использования дополнительного элемента наполнителя. Если вы запустили код, вы увидите, что все решения делают разные вещи. Например, если задать класс filler на элементе 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>

Ответ 5

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

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

Ответ 6

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

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

Ответ 7

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

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

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

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

Ответ 8

Если вам нужно выровнять один элемент по левому краю (например, заголовок), а затем выровнять несколько элементов по правому краю (например, 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)

Ответ 9

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

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

Ответ 10

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

Ответ 11

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

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

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

Ответ 12

Это решение должно работать

.main{
    position: relative;
    display: -ms-flexbox;
    display: flex;
    vertical-align: middle;
}

.main .c{
margin-left: auto;
order: 2;
}

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

Ответ 13

Пример кода на основе ответа от 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>