Яка різниця між елементами вирівнювання та вмісту вирівнювання?

Хтось може мені показати різницю між align-itemsі align-content?

align-itemsВластивість гнучкою коробки вирівнює елементи всередині гнучкої контейнера вздовж поперечної осі так само , як це justify-contentробить уздовж головної осі. (За замовчуванням flex-direction: rowпоперечна вісь відповідає вертикальній, а головна вісь відповідає горизонтальній. З flex-direction: columnцими двома змінюються відповідно).

Ось приклад того, як align-items:centerвиглядає:

Але align-contentпризначений для гнучких коробок для ліній. Це не впливає, коли елементи знаходяться в одному рядку. Він вирівнює всю структуру відповідно до її значення. Ось приклад для align-content: space-around;:

А ось як align-content: space-around;з align-items:centerзовнішністю:

Зверніть увагу, що 3-е поле та всі інші поля в першому рядку змінюються вертикально по центру в цьому рядку.

Ось декілька посилань на кодек для гри:

http://codepen.io/asim-coder/pen/MKQWbb

http://codepen.io/asim-coder/pen/WrMNWR

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

Я вважаю приклад http://flexboxfroggy.com/ дуже корисним.

Це займе у вас 10-20 хвилин, і на рівні 21 ви знайдете відповідь на своє запитання. У ньому згадувалося:

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

По-перше, align-itemsце для предметів в одному ряду. Таким чином , для одного ряду елементів на головній осі , align-itemsбуде погоджувати ці елементи відповідних один від одного , і вона буде починатися з новою точкою зору з наступного ряду.

Тепер align-contentне заважає елементам підряд, а самим рядкам . Отже, align-contentспробуємо вирівняти рядки відносно один одного і розгорнути контейнер.

Перевірте цю загадку: https://jsfiddle.net/htym5zkn/8/

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

1. Сам гнучкий контейнер має обмеження по висоті (наприклад, min-height: 60rem) і тому може стати занадто високим для свого вмісту
2. Дочірні предмети, укладені в контейнер, мають нерівну висоту

Умова 1 допомагає зрозуміти, що contentозначає його батьківський контейнер. Коли вміст буде наповнений контейнером, ми не зможемо побачити жодних ефектів позиціонування, що надходять від цього align-content. Лише коли у нас є додатковий простір уздовж поперечної осі, ми починаємо бачити його ефект: він вирівнює вміст відносно меж батьківського контейнера.

Умова 2 допомагає мені візуалізувати ефекти align-items: вона вирівнює елементи відносно один одного.

Ось приклад коду. Сировина надходить з підручника CSS Grid Wes Bos (21. Flexbox vs. CSS Grid)

• Приклад HTML:

  <div class="flex-container">
    <div class="item">Short</div>
    <div class="item">Longerrrrrrrrrrrrrr</div>
    <div class="item">💩</div>
    <div class="item" id="tall">This is Many Words</div>
    <div class="item">Lorem, ipsum.</div>
    <div class="item">10</div>
    <div class="item">Snickers</div>
    <div class="item">Wes Is Cool</div>
    <div class="item">Short</div>
  </div>

• Приклад CSS:

.flex-container {
  display: flex;
  /*dictates a min-height*/
  min-height: 60rem;
  flex-flow: row wrap;
  border: 5px solid white;
  justify-content: center;
  align-items: center;
  align-content: flex-start;
 }

#tall {
  /*intentionally made tall*/
  min-height: 30rem;
}

.item {
  margin: 10px;
  max-height: 10rem;
}

Приклад 1 : Давайте звузимо вікно перегляду, щоб вміст переповнювався контейнером. Це коли align-content: flex-start;не має ефектів, оскільки весь блок вмісту щільно помістився всередині контейнера (немає зайвого місця для перестановки!)

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

Приклад 2 : Коли ми розширюємо область перегляду, у нас більше не вистачає вмісту, щоб заповнити весь контейнер. Тепер ми починаємо бачити ефекти align-content: flex-start;- він вирівнює вміст відносно верхнього краю контейнера.

Ці приклади засновані на flexbox, але ті ж принципи застосовні і до CSS-мережі. Сподіваюся, це допомагає :)

Ну я їх оглядав у своєму браузері.

align-contentможе змінити висоту лінії в напрямку рядка для ширини або для стовпця , коли це значення дорівнює розтягнути, або додати порожній простір між або навколо ліній space-between, space-around, flex-start, flex-end values.

align-itemsможе змінювати висоту або розташування елементів у межах лінії. Якщо елементи не загорнуті, у них є лише один рядок, його область завжди розтягується до області гнучких вікон (навіть якщо елементи переповнюються) і align-contentне впливає на один рядок. Таким чином, це не впливає на елементи, які не загорнуті, і лише вони align-itemsможуть змінювати положення предметів або розтягувати їх, коли всі вони знаходяться в одному рядку.

Однак якщо вони загорнуті, у вас є кілька рядків та елементів у кожному рядку. І якщо всі елементи кожного рядка мають однакову висоту (для напрямку рядка), то висота рядка буде дорівнює висоті цих елементів, і ви не помітите жодного ефекту, змінивши align-itemsзначення.

Тож якщо ви хочете впливати на елементи, align-itemsколи ваші предмети загорнуті та мають однакову висоту (для напрямку рядка), спочатку вам слід скористатися align-contentзначенням розтягування, щоб розширити область рядків.

вирівняти зміст

align-contentкерує поперечною віссю (тобто вертикальним напрямком, якщо flex-directionє row, і горизонтальним, якщо flex-directionє column) розташуванням декількох ліній відносно один одного.

(Подумайте, що рядки абзацу розташовані вертикально, складені до верху, складені донизу. Це під flex-directionпарадигмою рядків).

вирівнювати-елементи

align-items керує поперечною віссю окремої лінії згинальних елементів.

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

Що я дізнався з кожної відповіді та відвідавши блог

що таке поперечна вісь і головна вісь

• головна вісь - горизонтальний ряд, а поперечна вісь - стовпчик вертикальний flex-direction: row
• головна вісь - це вертикальний стовпчик, а поперечна вісь - горизонтальний ряд flex-direction: column

Тепер вирівнюйте вміст і вирівнюйте елементи

align-content призначений для рядка, він працює, якщо контейнер має (більш ніж один рядок) властивості align-content

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

align-items - це для елементів у рядку Властивості елементів вирівнювання

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

Для більш довідкового візиту до флексу

Основна відмінність - коли висота елементів не однакова! Тоді ви можете бачити, як у рядку вони всі по центру \ end \ start

відповідно до того, що я зрозумів звідси :

коли ви використовуєте елемент вирівнювання або елемент виправдання, ви коригуєте "вміст всередині елемента сітки відповідно до осі стовпця або осі рядка.

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