Як правильно вирівняти елемент гнучкості?

681

Чи існує більш зручний спосіб вирівняти "Контакт", ніж використовувати 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/

html css flexbox

— Марк Боулдер
джерело

2

ви можете використовувати float правильно, але це так само ...! Найкращий спосіб - використовувати таблицю відображення з вирівнюванням тексту.

— Йохан Тілотті

Звичайно, якщо це краще. У вас все ще виникають проблеми з правильним вирівнюванням "Контакту", хоча: jsfiddle.net/vqDK9/1

— Марк Боулдер

2

Я оновив вашу скрипку jsfiddle.net/vqDK9/2

— Йоханн Тілотті

Ось як мінімум два способи зробити це: stackoverflow.com/a/33856609/3597276

— Майкл Бенджамін

453

Ось ви йдете. Встановіть 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>

Розгорніть фрагмент

— Кевін Саттл
джерело

291

Абоjustify-content: flex-end

— BT

1

Спробуйте встановити ширину .c до 300 пікс. Назва більше не зосереджена. Так, так, це відповідає на питання, але це порушує дизайн.

— Агамемнус

22

Зауважте, що це не завжди працює так, як ви могли очікувати, як, наприклад, коли є .c::afterпсевдоелемент. На мій досвід, margin-left: auto;це шлях.

— Буде чи

13

Абоflex-flow: row-reverse;

— jchook

8

Я не вважаю, що це правильна відповідь, якщо ви не хочете вирівняти лише один елемент у гнучкому контейнері.

— Фоксхаундн

1097

Більш гнучким підходом було б використання autoлівого поля (гнучкі елементи трактують автоматичні поля трохи інакше, ніж коли вони використовуються в контексті форматування блоку).

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

Розгорніть фрагмент

— приплив
джерело

2

Дякую. Ви особисто хотіли б це зробити над методом відображення Йоханна Тілотті вище? Якщо так, то чому?

— Марк Боулдер

4

@MarkBoulder: З міркувань сумісності його метод кращий, але якщо ви вже використовуєте flexbox, моя відповідь мала б більше сенсу.

— Адріат

4

@MarkBoulder: Вони обоє досягають одного і того ж в цій справі. Перевага буде мають інші властивості (і поведінку) , пов'язані з нежорсткими елементами , що підхід таблиці не має ( flex, orderі т.д.).

— Адріат

3

Якщо ви не можете обернути елементи, і вам потрібно плавати, сказати останні три праворуч, орієнтуйтеся на третій з останнього лише за допомогою цього margin-left: auto;стилю.

— Даніель Соколовський

2

@ Джустін зрозумів це, не потрібно їх обгортати - я не міг у своєму випадку. Рішення полягало в тому, щоб націлити на 1-й із трьох предметів лише с margin-left: auto;.

— Даніель Соколовський

41

Якщо ви хочете використовувати для цього флексбокс, вам слід зробити це ( 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, яка дозволяє швидко спробувати вищесказане.

— Нік Ф
джерело

2

space-betweenсаме те, що я шукав, дякую!

— Едді Флетчер

Межі зникають при використанні другої пропозиції, очікуваної поведінки? codepen.io/oshihirii/pen/RygKRd

— користувач1063287

38

Ви також можете використовувати наповнювач, щоб заповнити залишок місця.

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

Розгорніть фрагмент

— Арно
джерело

3

Нарешті хтось, хто розуміє флексбокс

— Кокодоко

9

@Kokodoko Так, використання ще одного несемантичного html-елемента для переміщення іншого елемента є вершиною розуміння flexbox ...

— Zanshin13

@ Zanshin13 Інші відповіді всі пишуть стільки зайвого css, що ви можете також залишити flex контейнер і

— кодувати

2

@Kokodoko justify-content: space-betweenце "стільки" css, серйозно? Не потрібно зайвих коментарів (але якщо ви хочете - ласкаво просимо до чату). Відповідь на це питання має право бути тут, тому що це рішення. Але точно не оптимальний. Idk, можливо, ти не помітив, але більшість css з інших відповідей - це ОП, і відповіді насправді зменшують (трохи) кількість авторського css. Ця відповідь не має менше css, ніж інші (не працюватиме без css OP - jsfiddle.net/63ma3b56 ). Але в ньому є ще один html-елемент.

— Заншин13

32

Або ви могли просто скористатися justify-content: flex-end

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

— Мелхія
джерело

3

justify-contentАтрибут є атрибутом флекс-контейнера, см флексі Cheatsheet Кріса Coyer в: css-tricks.com/snippets/css/a-guide-to-flexbox

— Клаас ван дер Weij

1

Це єдине рішення на цій сторінці, яке працювало на мене.

— користувач2847376

19

Так просто, як

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

— CESCO
джерело

12

Додайте до таблиці стилів такий клас CSS:

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

Помістіть порожній елемент між елементом зліва та елементом, який потрібно вирівняти праворуч:

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

— andreisrob
джерело

Для тих, хто не хоче просто вирівняти один елемент правою, але може захотіти вирівняти один елемент вліво, а правий вирівняти інший (у межах однієї гнучкої компоновки) - це шлях!

— Сенсей Джеймс

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 включений у фрагмент вище)

— TetraDev
джерело

6

"виправдати вміст: флекс-енд", який працює в контейнері цінової коробки.

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

— Мохаммед Адель
джерело

4

Я вважаю, що додавання "justify-content: flex-end" до контейнера flex вирішує проблему, а "justify-content: space-between" нічого не робить.

— ночі
джерело

2

Для тих, хто використовує Angular та Flex-Layout, використовуйте наступне на контейнері flex-item:

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

Дивіться документи fxLayoutAlign тут, а всі документи fxLayout тут .

— Ліндаусон
джерело

0

Приклад коду на основі відповіді 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>

Розгорніть фрагмент

— 1,21 гігаватт
джерело