Шпаргалка по простому CSS Flexbox
![](/static/storage/99674706329641615454178738250917693852.jpeg)
Flexbox великолепен, и они делают позиционирование в CSS намного лучше, чем исходное позиционирование (абсолютное, относительное и т. д.), но иногда их очень легко забыть или перепутать из-за их структурной природы.
И профессионалы, и новички борются за то, чтобы держать в уме все структурные различия и свойства стиля, поэтому я буду разбивать по частям эту замечательную шпаргалку Джони Балогна, которую я нашел очень замечательной и потрясающей.
Структура Flexbox
![](/static/storage/196901803101258765265386652741208332363.png)
Здесь нам показана структура флексбоксов и обозначено их происхождение.
Мы видим главную ось (горизонтальную ось) и поперечную ось (вертикальную ось).
Строки и столбцы [Ориентация]
![](/static/storage/10397790706486710165813512440086682062.png)
Здесь нам показаны свойства, которые активируют стили флексбокса, и параметры, которые у нас есть для ориентации дисплея.
Позиционирование на главной оси
![](/static/storage/151259437784543566592634885935177187737.png)
Здесь нам показано, как позиционировать гибкие элементы на главной оси. Где вы хотите их получить? Начало, центр, конец?
Управление пространством
![](/static/storage/126383065644810914616411014554144828027.png)
Здесь нам показано, как управлять пространством переменных наших элементов и как мы хотим, чтобы они отображались в контейнере. Основываясь на нашем окне просмотра, мы можем установить, как мы хотим, чтобы они выровнялись, либо на одной строке, либо на переполнении.
Позиционирование на поперечной оси
![](/static/storage/180578506725827369324788243044298419878.png)
Здесь нам показано, как позиционировать гибкие элементы на главной оси. Мы могли бы настроить наши гибкие элементы так, чтобы они растягивались по оси или начинались в конце или в центре.
Управление строками
![](/static/storage/222676016969729424602026366748461154904.png)
![](/static/storage/339556577479100937997982273033756202430.png)
Здесь нам показаны параметры свойств, которые у нас есть, когда у нас есть несколько строк, и то, как мы можем разместить их в контейнере.
Порядок товаров
![](/static/storage/161266673049112834701738732233715071903.png)
Здесь нам показано свойство order
, которое устанавливает порядок размещения элемента в гибком контейнере. Элементы в контейнере сортируются по возрастанию значения, а затем по порядку их исходного кода.
Рост предмета
![](/static/storage/157485185670422587313758064827521772927.png)
Здесь нам показано свойство flex-grow
, которое устанавливает коэффициент основного размера гибкого элемента flex-grow
.
Выравнивание
![](/static/storage/310400967550193753242019345981622549751.png)
Здесь нам показаны различные свойства гибкости выравнивания.
Заключение
Спасибо, что прочитали 🔥🔥🔥, и я надеюсь, что эта статья была вам полезна 🔥