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

244

Есть ли более flexbox -ий способ выравнивания по правому краю "Контакт", чем использовать 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/

  • 2
    Вы можете использовать float прямо, но это так же ...! Лучший способ - использовать таблицу отображения с выравниванием текста.
  • 0
    Конечно, если так. По-прежнему возникают проблемы с выравниванием «Контакта» по правому краю : jsfiddle.net/vqDK9/1
Показать ещё 2 комментария
Теги:
flexbox

6 ответов

99
Лучший ответ

Здесь вы идете. Установите 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>
Поделиться
  • 181
    Или justify-content: flex-end
  • 1
    Попробуйте установить ширину .c до 300px. Название больше не по центру. Так что да, это отвечает на вопрос, но это нарушает дизайн.
Показать ещё 3 комментария
644

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

.c {
    margin-left: auto;
}

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

Поделиться
  • 1
    Благодарю. Вы лично предпочли бы это по сравнению с методом отображения таблицы Йоханна Тилотти выше? Если так, то почему?
  • 4
    @MarkBoulder: По причинам совместимости его метод лучше, но если вы уже используете flexbox, мой ответ будет более понятным.
Показать ещё 18 комментариев
23

Если вы хотите использовать 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, чтобы вы могли быстро попробовать выше.

Поделиться
  • 2
    space-between было именно то, что я искал, спасибо!
  • 0
    Границы исчезают при использовании второго предложения, ожидаемое поведение? codepen.io/oshihirii/pen/RygKRd
10

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

<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>
Поделиться
  • 2
    Наконец-то, кто понимает flexbox
  • 6
    @Kokodoko да, использование еще одного несемантического HTML-элемента для перемещения другого элемента - вершина понимания flexbox ...
Показать ещё 3 комментария
0

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

.main { display: flex; flex-direction:row-reverse;}
Поделиться
0

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

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

Изображение 5019

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню