Як обґрунтувати окремий елемент флексокса (замінити виправдати вміст)

283

Ви можете перевизначити align-itemsз align-selfдля гнучкого елемента. Я шукаю спосіб змінити justify-contentскладний елемент.

Якщо у вас був контейнер для флешбоксу justify-content:flex-end, але ви хочете, щоб перший предмет був justify-content: flex-start, як це можна зробити?

На це найкраще відповів цей пост: https://stackoverflow.com/a/33856609/269396

css flexbox

— Макси
джерело

2

Використовуйте autoнацінки. Дивіться поле № 26 тут: stackoverflow.com/a/33856609/3597276

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

Дякуємо за посилання на найбільш корисну відповідь!

— Брейді Даулінг

549

Там , здається, не буде justify-self, але ви можете добитися подібного результату настройки , відповідні marginдля auto¹. E. g. для flex-direction: row(за замовчуванням) слід встановити margin-right: autoвирівнювання дитини зліва.

.container {
  height: 100px;
  border: solid 10px skyblue;
  
  display: flex;
  justify-content: flex-end;
}
.block {
  width: 50px;
  background: tomato;
}
.justify-start {
  margin-right: auto;
}

<div class="container">
  <div class="block justify-start"></div>
  <div class="block"></div>
</div>

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

¹ Така поведінка визначається специфікацією Flexbox .

— Павло
джерело

51

Ця техніка відмінна, вона також працює у вертикальному напрямку. Наприклад, ви хочете, щоб останній елемент всередині контейнера фіксованої висоти тримався на дні. Ви можете використовувати `` `.container {flex-smer: стовпець; justify-content: flex-start} .last-item {margin-top: auto} `` `

— Крістіан Шленскер

6

@krulik Ця поведінка визначена специфікацією Flexbox, див. w3.org/TR/2012/CR-css3-flexbox-20120918/#auto-margins

— Павло

7

Після ще кількох розслідувань це justify-selfможе не мати нічого спільного, flexboxа скоріше використовується, css gridsале я не впевнений. Здається, я не можу змусити його працювати в Chrome із флешбоком.

— Джейк Вілсон

8

Що робити, якщо я хочу, щоб один предмет був зліва, а другий - в центрі?

— Фахмі

3

"У макетах flexbox ця властивість ігнорується" - взято з документів mozilla на виправдання-self

— Finlay Percy

19

AFAIK в специфікаціях немає властивості для цього, але ось я використовую хитрість: встановіть для елемента контейнера (той, який є display:flex), а justify-content:space-around потім додайте додатковий елемент між першим і другим елементом і встановіть його flex-grow:10(або деякий інше значення, яке працює з вашим налаштуванням)

Редагувати: якщо елементи чітко вирівняні, добре також додати flex-shrink: 10;додатковий елемент, так що макет буде відповідати належним чином на менших пристроях.

— eeglbalazs
джерело

1

Це працює, не вказуючи ширину (принаймні, це було в моїй ситуації)

— eeglbalazs

Спробуйтеmin-width: 0

— The

13

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

.space-between {
  border: 1px solid red;
  display: flex;
  justify-content: space-between;
}
.default-flex {
  border: 1px solid blue;
  display: flex;
}
.child {
  width: 100px;
  height: 100px;
  border: 1px solid;
}

<div class="space-between">
  <div class="child">1</div>
  <div class="default-flex">
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
  </div>
</div>

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

Або якщо ви робили те саме, що працює з flex-start і flex-end, ви просто поміняєте замовлення на контейнер-flex за замовчуванням та одиноку дитину.

— borkxs
джерело

5

Схоже, justify-selfнезабаром з’явиться браузер . Про нього вже є стаття на MDN . На момент написання цього повідомлення підтримка браузера погана.

Щодо рішення маржі: у мене є сітка Flexbox з пробілами. Немає flex-gapвласності (поки що) з Flexbox. Отже, для жолобів я використовую прокладки та поля, тому margin: autoпотрібно перезаписати інші поля ...

— Френк Леммер
джерело

7

На жаль,In flexbox layouts, this property is ignored

— Sphinxxx

1

@Sphinxxx Так, але justify-self це працює в display: gridконтейнері. Це останнє час, як Flexbox, так надає широкі можливості позиціонування , як align-items, align-self, а також деякі додаткові функції , такі як , хто нам потрібен тут, justify-self. Я рекомендую використовувати флексокс там, де достатньо, але якщо цього не вистачає, сітка, швидше за все, має те, що ви шукаєте. (. , Наприклад , легко вирівнюючи одна дитина до центру-х і центр-у, а інший до правої х центровий у - Flexbox є margin-left: autoдля легкої лівий + правий, але не в центрі + праворуч) Приклад: stackoverflow.com/a/57128453 / 2441655

— Венрікс

1

Для тих ситуацій , коли ширина елементів ви хочете , flex-endяк відомо, ви можете встановити їх прогин в «0 0 ## пікс» і встановити елемент , який ви хочете flex-startзflex:1

Це призведе до того, що псевдоелемент flex-startзаповнить контейнер, просто відформатуйте його text-align:leftабо що завгодно.

— Макси
джерело

0

Я вирішив подібний випадок, встановивши стиль внутрішнього елемента margin: 0 auto.
Ситуація: у моєму меню зазвичай є три кнопки, в цьому випадку вони повинні бути justify-content: space-between. Але коли буде лише одна кнопка, вона тепер буде вирівняна по центру, а не ліворуч.

— Мікро
джерело