Чому у CSS Flexbox чому немає властивостей «виправдовувати елементи» та «виправдовувати-само»?

Розглянемо головну вісь і поперечну вісь гнучких контейнерів:

                                                                                                                                                   _{Джерело: W3C}

Щоб вирівняти гнучкі елементи по головній осі, є одна властивість:

• justify-content

Для вирівнювання гнучких елементів по поперечній осі є три властивості:

• align-content
• align-items
• align-self

На зображенні вище головна вісь горизонтальна, а поперечна вісь - вертикальна. Це типові вказівки flex-контейнера.

Однак ці вказівки можна легко змінити із flex-directionвластивістю.

/* main axis is horizontal, cross axis is vertical */
flex-direction: row;
flex-direction: row-reverse;

/* main axis is vertical, cross axis is horizontal */    
flex-direction: column;
flex-direction: column-reverse;

(Поперечна вісь завжди перпендикулярна до головної осі.)

Моя думка в описі того, як працюють осі, полягає в тому, що в жодному напрямку не здається нічого особливого. Основна вісь, поперечна вісь, вони обидві за рівнем важливості і flex-directionполегшують перемикання вперед і назад.

То чому поперечна вісь отримує два додаткові властивості вирівнювання?

Чому align-contentі align-itemsоб'єднані в одну властивість для головної осі?

Чому головна вісь не отримує justify-selfвластивості?

Сценарії, де ці властивості були б корисні:

• розміщення гнучких предметів у куті гнучких контейнерів
  #box3 { align-self: flex-end; justify-self: flex-end; }

• зробити групу гнучких елементів вирівняти праворуч ( justify-content: flex-end), але перший елемент вирівняти ліворуч ( justify-self: flex-start)

  Розглянемо розділ заголовка з групою елементів навігації та логотипом. З justify-selfлоготипом можна вирівняти ліворуч, а елементи навігації залишаються вправо, і вся рівномірне налаштування ("згинається") під різні розміри екрана.

• в ряд з трьох гнучких елементів прикріпіть середній елемент до центру контейнера ( justify-content: center) і вирівняйте сусідні елементи до країв контейнера ( justify-self: flex-startі justify-self: flex-end).

  Зверніть увагу , що значення space-aroundі space-betweenна justify-contentмайно не буде тримати середній елемент в центрі навколо контейнера , якщо сусідні елементи мають різну ширину.

#container {
  display: flex;
  justify-content: space-between;
  background-color: lightyellow;
}
.box {
  height: 50px;
  width: 75px;
  background-color: springgreen;
}
.box1 {
  width: 100px;
}
.box3 {
  width: 200px;
}
#center {
  text-align: center;
  margin-bottom: 5px;
}
#center > span {
  background-color: aqua;
  padding: 2px;
}

<div id="center">
  <span>TRUE CENTER</span>
</div>

<div id="container">
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
</div>

<p>note that the middlebox will only be truly centered if adjacent boxes are equal width</p>

версія jsFiddle

На момент написання статті, немає жодної згадки justify-selfабо justify-itemsв Flexbox специфікації .

Однак у модулі вирівнювання коробки CSS , який є незавершеною пропозицією W3C встановити загальний набір властивостей вирівнювання для використання у всіх моделях коробки, є таке:

                                                                                                                                                   _{Джерело: W3C}

Ви помітите, що justify-selfі justify-itemsвас розглядають ... але не для flexbox .

Я закінчу ще раз, повторивши головне питання:

Чому немає властивостей "justify-items" та "justify-self"?

Методи вирівнювання гнучких предметів уздовж основної осі

Як зазначено у запитанні:

Щоб вирівняти гнучкі елементи по головній осі, є одна властивість: justify-content

Щоб вирівняти нежорсткі елементи уздовж поперечної осі є три властивості: align-content, align-itemsіalign-self .

Далі питання задає:

Чому немає justify-itemsі justify-selfвластивості?

Одна відповідь може бути: Тому що вони не потрібні.

Специфікація flexbox передбачає два способи вирівнювання гнучких елементів по головній осі:

1. justify-contentКлючова властивість, і
2. auto поля

виправдання-зміст

У justify-contentпоєднується власності згинати елементи уздовж головної осі гнучкого контейнера.

Він застосовується до гнучких контейнерів, але стосується лише гнучких предметів.

Існує п'ять варіантів вирівнювання:

• flex-start ~ Елементи гнучкості упаковуються до початку рядка.

  

• flex-end ~ Елементи гнучкості упаковуються в кінці рядка.

  

• center ~ Елементи гнучкості упаковуються до центру лінії.

  

• space-between~ Елементи гнучкості розташовані рівномірно, при цьому перший елемент вирівняний до одного краю контейнера, а останній - до протилежного краю. Краї, використані першими та останніми елементами, залежать від режимуflex-direction та режиму запису ( ltrабо rtl).

  

• space-around~ Те саме, що, space-betweenокрім проміжків напіврозміру на обох кінцях.

  

Автополе

З auto полем гнучких елементів можна відцентрувати, відставити або упакувати в підгрупи.

На відміну від того justify-content, який застосовується до гнучких контейнерів, autoполя відрізняються від гнучких елементів.

Вони працюють, витрачаючи весь вільний простір у вказаному напрямку.

Вирівняйте групу гнучких елементів праворуч, але перший елемент ліворуч

Сценарій з питання:

• зробити групу гнучких елементів вирівняти праворуч ( justify-content: flex-end), але перший елемент вирівняти ліворуч ( justify-self: flex-start)

  Розглянемо розділ заголовка з групою елементів навігації та логотипом. З justify-selfлоготипом можна вирівняти ліворуч, а елементи навігації залишаються вправо, і вся рівномірне налаштування ("згинається") під різні розміри екрана.

Інші корисні сценарії:

Помістіть гнучкий предмет у кут

Сценарій з питання:

• розміщення гнучких предметів у кутку .box { align-self: flex-end; justify-self: flex-end; }

Центруйте гнучкий елемент вертикально і горизонтально

margin: autoє альтернативою justify-content: centerіalign-items: center .

Замість цього коду на контейнері flex:

.container {
    justify-content: center;
    align-items: center;
}

Ви можете використовувати це на елементі flex:

.box56 {
    margin: auto;
}

Ця альтернатива корисна при центруванні гнучких елементів, які переповнюють контейнер .

Відцентруйте гнучкий елемент і відцентруйте другий гнучкий елемент між першим і краєм

Гнучка ємність вирівнює гнучкі предмети, розподіляючи вільний простір.

Отже, щоб створити рівний баланс , щоб середній предмет міг бути центрований у контейнері з одним елементом поруч, слід ввести противагу.

У наведених нижче прикладах невидимі елементи третього гнучкості (поля 61 та 68) вводяться для врівноваження "реальних" предметів (вікна 63 та 66).

Звичайно, цей метод не є нічого великого з точки зору семантики.

Крім того, ви можете використовувати псевдоелемент замість фактичного елемента DOM. Або ви можете використовувати абсолютне позиціонування. Усі три методи охоплені тут: центральні та вирівняні внизу гнучкі елементи

ПРИМІТКА. Наведені вище приклади спрацьовуватимуть - лише з точки зору справжнього центрування - тоді, коли самі зовнішні елементи мають рівну висоту / ширину. Коли гнучкі елементи різної довжини див. Наступний приклад.

Відцентруйте гнучкий елемент, коли сусідні елементи різняться за розміром

Сценарій з питання:

• в ряд з трьох гнучких предметів прикріпіть середній елемент до центру контейнера (justify-content: center ) і вирівняйте сусідні елементи до країв контейнера ( justify-self: flex-startі justify-self: flex-end).

  Зверніть увагу , що значення space-aroundі space-betweenна justify-contentмайно не будуть тримати середній елемент центрована по відношенню до контейнера , якщо сусідні елементи мають різну ширину ( див демонстраційних ).

Як зазначалося, якщо всі гнучкі елементи не мають однакової ширини чи висоти (залежно від flex-direction), середній елемент не може бути по-справжньому по центру. Ця проблема є вагомим приводом для justify-selfвластивості (призначена, звичайно, для вирішення завдання).

#container {
  display: flex;
  justify-content: space-between;
  background-color: lightyellow;
}
.box {
  height: 50px;
  width: 75px;
  background-color: springgreen;
}
.box1 {
  width: 100px;
}
.box3 {
  width: 200px;
}
#center {
  text-align: center;
  margin-bottom: 5px;
}
#center > span {
  background-color: aqua;
  padding: 2px;
}

<div id="center">
  <span>TRUE CENTER</span>
</div>

<div id="container">
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
</div>

<p>The middle box will be truly centered only if adjacent boxes are equal width.</p>

Ось два способи вирішення цієї проблеми:

Рішення №1: Абсолютне позиціонування

Специфікація flexbox дозволяє абсолютно позиціонувати гнучкі елементи . Це дозволяє ідеально орієнтувати середній предмет незалежно від розміру його побратимів.

Просто пам’ятайте, що, як і всі абсолютно розташовані елементи, елементи вилучаються з документообігу . Це означає, що вони не займають місця в контейнері і можуть перекривати своїх побратимів.

У наведених нижче прикладах середній елемент зосереджений з абсолютним розміщенням, а зовнішні елементи залишаються потоковими. Але таку ж макет можна досягти і зворотним способом: відцентруйте середній елемент justify-content: centerі абсолютно розташуйте зовнішні елементи.

Рішення №2: Вкладені контейнери Flex (немає абсолютного позиціонування)

.container {
  display: flex;
}
.box {
  flex: 1;
  display: flex;
  justify-content: center;
}
.box71 > span { margin-right: auto; }
.box73 > span { margin-left: auto;  }

/* non-essential */
.box {
  align-items: center;
  border: 1px solid #ccc;
  background-color: lightgreen;
  height: 40px;
}

<div class="container">
  <div class="box box71"><span>71 short</span></div>
  <div class="box box72"><span>72 centered</span></div>
  <div class="box box73"><span>73 loooooooooooooooong</span></div>
</div>

Ось як це працює:

• Діва верхнього рівня (.container ) - це гнучка ємність.
• Кожен дочірній div ( .box) тепер є гнучким елементом.
• Кожен .boxелемент задається flex: 1для того, щоб розподілити простір контейнера порівну.
• Тепер елементи займають увесь простір в ряду і мають рівну ширину.
• Зробіть кожен елемент (вкладеним) гнучким контейнером та додайте justify-content: center .
• Тепер кожен span елемент є центрованим гнучким елементом.
• Використовуйте гнучкі autoполя для зміщення зовнішніх spans вліво та вправо.

Ви також можете відмовитися justify-contentі використовуватиauto виключно маржі.

Але justify-contentтут можна працювати, оскільки autoпріоритет завжди має пріоритет. З специфікації:

8.1. Вирівнювання з auto маржами

Перед вирівнюванням через justify-contentта align-selfбудь-який позитивний вільний простір розподіляється на автоматичні поля в цьому вимірі.

виправдати-зміст: простір-те саме (концепція)

Повернувшись на justify-contentхвилину, ось ідея ще одного варіанту.

• space-same~ Гібрид space-betweenі space-around. Елементи гнучкості розташовані рівномірно (на зразок space-between), за винятком того, що на обох кінцях є напіврозмірні проміжки (як space-around), на обох кінцях є повнорозмірні простори.

Це розташування може бути досягнуто з ::beforeі ::afterпсевдо-елементів на гнучкому контейнері.

^{(кредит: @oriol для коду та @crl для мітки)}

ОНОВЛЕННЯ: браузери почали впроваджувати space-evenly, що виконує вищесказане. Детальніше дивіться у цій публікації: Рівний простір між елементами гнучкості

PLAYGROUND (включає код для всіх прикладів вище)

Я знаю, що це не відповідь, але я хотів би внести свій внесок у цю справу для того, що воно варте. Було б чудово, якби вони могли випустити justify-selfдля flexbox, щоб зробити його справді гнучким.

Я вважаю, що коли на осі є кілька предметів, найбільш логічним способом justify-selfповедінки є узгодження себе з найближчими сусідами (або краєм), як показано нижче.

Я щиро сподіваюся, W3C це помітить і, принаймні, розгляне це. =)

Таким чином ви можете мати предмет, по-справжньому по центру, незалежно від розміру лівого та правого поля. Коли одна з коробок досягне точки центральної коробки, вона просто натисне її, поки не буде більше місця для розподілу.

Простота створення дивовижних макетів нескінченна, погляньте на цей «складний» приклад.

Це було задано у списку у стилі www, і Tab Atkins (редактор специфікацій) надав відповідь, пояснюючи чому . Я докладно розповім про це тут.

Для початку спочатку припустимо, що наш гнучкий контейнер однорядний (flex-wrap: nowrap ). У цьому випадку чітко існує різниця вирівнювання між основною віссю та поперечною віссю - на головній осі є декілька елементів, але в поперечній осі лише один елемент. Таким чином, має сенс мати налаштовану за позицією "вирівнювати-само" на пересічній осі (оскільки кожен елемент вирівнюється окремо, самостійно), тоді як це не має сенсу в головній осі (оскільки там елементи вирівнюються колективно).

Для багатолінійного флексокса одна і та ж логіка застосовується до кожної "гнучкої лінії". У заданому рядку елементи вирівнюються окремо по осі хреста (оскільки на осі хреста є лише один елемент на рядку), порівняно з основною віссю.

Ось ще один спосіб її фразування: так, все з *-selfі *-contentвластивості про те , як розподілити додатковий простір навколо речей. Але ключова відмінність полягає в тому, що *-selfверсії стосуються випадків, коли на цій осі є лише одна річ , а *-contentверсії - для тих, коли на цій осі потенційно багато речей . Сценарії "одне - проти багатьох речей" - це різні типи проблем, і тому вони мають різні типи варіантів - наприклад, значення space-around/ space-betweenмає сенс для *-content, але не для *-self.

ТАК: На головній осі флексбоксу є багато речей, які розподіляють простір навколо. Тож *-contentвластивість має сенс там, але не *-selfвласність.

Навпаки, у поперечній осі ми маємо і a, *-selfі *-contentвластивість. Один визначає, як ми будемо розподіляти простір навколо безлічі гнучких ліній ( align-content), тоді як інший ( align-self) визначає, як розподілити простір навколо окремих гнучких предметів по осі поперечини, в межах заданої лінії згинання.

(Я ігнорую *-itemsтут властивості, оскільки вони просто встановлюють значення за замовчуванням *-self.)

Я знаю, що це не використовує flexbox, але для простого випадку використання трьох предметів (один зліва, один у центрі, один праворуч), це можна зробити легко, використовуючи display: gridбатьків, grid-area: 1/1/1/1;дітей та justify-selfпозиціонування цих дітей.

<div style="border: 1px solid red; display: grid; width: 100px; height: 25px;">
  <div style="border: 1px solid blue; width: 25px; grid-area: 1/1/1/1; justify-self: left;"></div>
  <div style="border: 1px solid blue; width: 25px; grid-area: 1/1/1/1; justify-self: center;"></div>
  <div style="border: 1px solid blue; width: 25px; grid-area: 1/1/1/1; justify-self: right;"></div>
</div>

Я просто знайшов власне рішення цієї проблеми, або, принаймні, свою проблему.
Я використовував justify-content: space-aroundзамість justify-content: space-between;.

Таким чином, кінцеві елементи будуть триматися вгорі та внизу, і ви можете мати власні поля, якщо хочете.