Как flex-wrap работает с выравниванием, выравниванием и выравниванием содержимого?

align-self

В следующем коде align-self работает с flex-wrap: nowrap .

введите описание изображения здесь

 flex-container { display: flex; flex-wrap: nowrap; align-content: flex-start; width: 250px; height: 250px; background-color: silver; } flex-item { flex: 0 0 50px; height: 50px; margin: 5px; background-color: lightgreen; } flex-item:last-child { align-self: flex-end; background-color: crimson; } 
         

Но когда контейнер переключается на flex-wrap: wrap , свойство align-self терпит неудачу.

введите описание изображения здесь

 flex-container { display: flex; flex-wrap: wrap; align-content: flex-start; width: 250px; height: 250px; background-color: silver; } flex-item { flex: 0 0 50px; height: 50px; margin: 5px; background-color: lightgreen; } flex-item:last-child { align-self: flex-end; background-color: crimson; } 
         


align-items

Точно так же, почему здесь работают align-items (wrap disabled):

введите описание изображения здесь

 flex-container { display: flex; flex-wrap: nowrap; align-items: flex-end; align-content: flex-start; width: 250px; height: 250px; background-color: silver; } flex-item { flex: 0 0 50px; height: 50px; margin: 5px; background-color: lightgreen; } 
         

… но не здесь (обертка включена):

введите описание изображения здесь

 flex-container { display: flex; flex-wrap: wrap; align-items: flex-end; align-content: flex-start; width: 250px; height: 250px; background-color: silver; } flex-item { flex: 0 0 50px; height: 50px; margin: 5px; background-color: lightgreen; } 
         


align-content

С flex-wrap: nowrap , свойство align-content не будет вертикально центрировать элементы flex здесь:

введите описание изображения здесь

 flex-container { display: flex; flex-wrap: nowrap; align-content: center; width: 250px; height: 250px; background-color: silver; } flex-item { flex: 0 0 50px; height: 50px; margin: 5px; background-color: lightgreen; } 
         

Но тогда, как ни странно, если обертка включена и align-content не указано, контейнер создает широкие промежутки между строками:

введите описание изображения здесь

 flex-container { display: flex; flex-wrap: wrap; /* align-content: center; */ width: 250px; height: 250px; background-color: silver; } flex-item { flex: 0 0 50px; height: 50px; margin: 5px; background-color: lightgreen; } 
         

И align-self снова.

введите описание изображения здесь

 flex-container { display: flex; flex-wrap: wrap; /* align-content: center; */ width: 250px; height: 250px; background-color: silver; } flex-item { flex: 0 0 50px; height: 50px; margin: 5px; background-color: lightgreen; } flex-item:nth-child(even) { align-self: flex-end; background-color: crimson; } 
         

Как flex-wrap работает с align-self , align-items и align-content?

Короткий ответ

Хотя свойство flex-wrap выглядит довольно основательно – он контролирует, могут ли элементы гибкости обернуть – на самом деле он оказывает значительное влияние на весь формат Flexbox.

Свойство flex-wrap определяет тип гибкого контейнера, который вы будете использовать.

  • flex-wrap: nowrap создает однострочный гибкий контейнер
  • flex-wrap: wrap и wrap-reverse создают многострочный гибкий контейнер

align-items и align-self работают как в одно-, так и в многострочных контейнерах. Однако они могут иметь эффект только при наличии свободного места на пересекающейся оси гибкой линии.

Свойство align-content работает только в многострочных контейнерах. Он игнорируется в однострочных контейнерах.


объяснение

Спецификация flexbox предоставляет четыре свойства ключевых слов для выравнивания элементов flex:

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

Чтобы понять функции этих свойств, важно сначала понять структуру гибкого контейнера.


Часть 1: Понимание основной оси и поперечной оси контейнера Flex

Оси X и Y

Гибкий контейнер работает в двух направлениях: по оси х (по горизонтали) и по оси Y (по вертикали).

ось x и ось y

Источник: Википедия

Детальные элементы гибкого контейнера, известные как «гибкие элементы», могут быть выровнены в любом направлении.

Это гибкое выравнивание на самом фундаментальном уровне.

Основные и крестовые топоры

Наложение осей x и y в гибком маке – основная и поперечная оси.

По умолчанию основная ось горизонтальна (ось х), а поперечная ось вертикальна (ось y). Это начальная настройка, определенная спецификацией flexbox .

основная ось и поперечная ось

Источник: W3C

Однако, в отличие от осей x и y, которые фиксированы, основная и поперечная оси могут переключать направления.

Свойство flex-direction

На изображении выше основная ось горизонтальная, а поперечная ось – вертикальная. Как упоминалось ранее, это начальная настройка гибкого контейнера.

Однако эти направления можно легко переключить с помощью свойства flex-direction . Это свойство управляет направлением основной оси; он определяет, выравниваются ли элементы гибкости вертикально или горизонтально.

Из спецификации:

5.1. Направление streamа Flex: свойство flex-direction

Свойство flex-direction указывает, как элементы гибкости помещаются в контейнер flex, задавая направление основной оси гибкого контейнера. Это определяет направление, в котором изложены гибкие элементы.

Существует четыре значения свойства flex-direction :

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

Перекрестная ось всегда перпендикулярна основной оси.


Часть 2: Линии Flex

Внутри контейнера гибкие элементы существуют в строке, известной как «гибкая линия».

Гибкая линия представляет собой строку или столбец, в зависимости от flex-direction .

Контейнер может иметь одну или несколько линий, в зависимости от flex-wrap .

Одноконтурный контейнер Flex

flex-wrap: nowrap устанавливает однострочный гибкий контейнер, в котором элементы гибкости вынуждены оставаться в одной строке (даже если они переполняют контейнер).

однолинейный гибкий контейнер (один столбец)

На изображении выше есть одна гибкая линия.

 flex-container { display: flex; flex-direction: column; flex-wrap: nowrap; /* <-- allows single-line flex container */ width: 250px; height: 250px; background-color: silver; } flex-item { flex: 0 0 50px; width: 50px; margin: 5px; background-color: lightgreen; } 
        

Прежде всего, выравнивание-содержание бесполезно, если нет обертки:

w3c doc

Свойство align-content выравнивает линии гибкого контейнера в контейнере гибкого диска, когда в поперечной оси имеется дополнительное пространство, подобно тому, как выравнивание-выравнивание выравнивает отдельные элементы на основной оси. Обратите внимание: это свойство не влияет на однолинейный гибкий контейнер.

Кроме того, в вашем втором случае совпадение не нарушается. Это бесполезно, потому что внутренние линии упакованы. Давайте создадим пространство, чтобы стиль мог работать:

 flex-container { display: flex; flex-wrap: wrap; align-content: flex-start; width: 250px; height: 250px; background-color: silver; } flex-item { flex: 0 0 50px; height: 50px; margin: 5px; background-color: lightgreen; } flex-item:last-child { align-self: flex-end; background-color: crimson; } flex-item:nth-child(5) { height: 90px; /* added */ } 
         
  • Bootstrap 4 navbar с 2 рядами
  • Установите детей из гибкого windows на разную высоту, чтобы использовать доступное пространство
  • Как выровнять левую последнюю строку / строку в нескольких линиях flexbox
  • firefox overflow-y не работает с вложенным flexbox
  • Сделайте div div двумя строками в сетке
  • Bootstrap 4 Navbar и заполняющая высота контента flexbox
  • Сделать flex-grow расширять элементы на основе их первоначального размера
  • Текст в контейнере flex не переносится в IE11
  • Как я могу получить поведение Fbox 33.x Flexbox в FF 34.x?
  • Проблема при центрировании по вертикали с помощью flexbox, когда высоты неизвестны
  • Каковы различия между гибким основанием и шириной?
  • Interesting Posts

    Как получить HMODULE для текущего исполняемого кода?

    Наружная топология сетки WiFi против ретрансляторов

    Как получить текущего пользователя, который обращается к приложению ASP.NET?

    Сообщение об ошибке «Невозможно загрузить один или несколько запрошенных типов. Получите свойство LoaderExceptions для получения дополнительной информации. ‘

    Когда я должен создать деструктор?

    Изменение размера таблицы / столбца / индекса в oracle 11g или 12c

    Android – воспроизведение звука при нажатии кнопки – исключение Null pointer

    javax.net.ssl.SSLException: Ошибка чтения: ssl = 0x9524b800: ошибка ввода-вывода во время системного вызова, сброс соединения с помощью одноранговой сети

    Изменение шрифта для richtextbox без потери форматирования

    Как предотвратить ReflectionTypeLoadException при вызове Assembly.GetTypes ()

    Могут ли какие-либо процессоры реального мира не использовать IEEE 754?

    вводить CSS на сайт с webview в android

    Прокрутка UITableView внутри UIScrollView

    Как использовать файлы свойств Java?

    Клиент службы WSDL / SOAP для Android

    Давайте будем гением компьютера.