it-swarm.com.ru

Как правильно выровнять элемент 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/

524
Mark Boulder

Ну вот. Установите 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>
341
Kevin Suttle

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

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

32
Nick F

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

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

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

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

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

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

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

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

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

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

8
andreisrob

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

enter image description here

6
TetraDev

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

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

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

3
nights

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

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

Смотрите fxLayoutAlign docs здесь и полные fxLayout docs здесь .

2
Lindauson

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