Узнайте, как освоить CSS flexbox, от основ до продвинутых методов. Совершенствуйте свои навыки веб-верстки и с легкостью создавайте адаптивный дизайн.
Введение
Вы устали от использования таблиц, плавающих элементов и других традиционных методов компоновки CSS, которые просто больше не подходят? Пришло время воспользоваться мощью CSS Flexbox! С помощью Flexbox вы можете создавать сложные и динамичные макеты, которые адаптируются к разным размерам экрана и ориентации устройства. В этом руководстве вы познакомитесь со всеми основами CSS Flexbox и познакомитесь с передовыми методами создания действительно потрясающих веб-дизайнов.
Если вы любите учиться, я предлагаю вам попробовать эту игру, основанную на flexbox. Вы быстро поймете весь модуль.
В этом руководстве вы узнаете о следующих свойствах Flexbox и соответствующих примерах кода:
Свойства Flexbox для родительского элемента (контейнера)
отображать
Определяет контейнер как гибкий контейнер и позволяет применять свойства Flexbox к его дочерним элементам.
.container {
display: flex; /* or inline-flex */
}
flex-направление
Устанавливает направление, в котором гибкие элементы размещаются внутри контейнера. Варианты включают строку, строку-реверс, столбец и столбец-реверс.
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
гибкая упаковка
Определяет, должны ли гибкие элементы переноситься или нет, когда на главной оси недостаточно места. Опции включают в себя nowrap, wrap и wrap-reverse.
- nowrap (по умолчанию): все гибкие элементы будут в одной строке.
- wrap: flex-элементы будут переноситься на несколько строк сверху вниз.
- wrap-reverse: flex-элементы переносятся на несколько строк снизу вверх.
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
гибкий поток
Сокращение для одновременной установки flex-direction и flex-wrap.
.container {
flex-flow: column wrap;
}
выравнивание содержания
justify-content — это свойство CSS Flexbox, которое выравнивает flex-элементы по главной оси контейнера. Он имеет шесть возможных значений:
- flex-start: это значение выравнивает элементы по началу контейнера. Если главная ось контейнера горизонтальна, элементы будут выровнены по левому краю. Если главная ось вертикальна, элементы будут выровнены по верхнему краю.
- flex-end: это значение выравнивает элементы по краю контейнера. Если главная ось контейнера горизонтальна, элементы будут выровнены по правому краю. Если главная ось вертикальна, элементы будут выровнены по нижнему краю.
- center: это значение центрирует элементы вдоль главной оси контейнера. Если главная ось горизонтальна, элементы будут центрированы горизонтально. Если главная ось вертикальна, элементы будут центрированы по вертикали.
- space-between: это значение равномерно распределяет элементы вдоль главной оси контейнера, при этом первый элемент выравнивается по началу, а последний — по концу. Остальные элементы равномерно распределяются между ними.
- stretch: это значение растягивает элементы, чтобы заполнить контейнер вдоль главной оси. Это означает, что элементы будут расширены или сжаты, чтобы заполнить доступное пространство.
- space-around: это значение равномерно распределяет элементы вдоль главной оси контейнера с одинаковым расстоянием между ними. В начале и в конце контейнера также есть интервал, поэтому элементы не выровнены по краям.
.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch
}
выравнивание элементов
Свойство align-items используется для вертикального выравнивания flex-элементов внутри контейнера. Вот описания для каждого значения:
- flex-start: это значение выравнивает flex-элементы по верхней части контейнера. Элементы выравниваются на основе края поперечного поля гибких элементов.
- flex-end: это значение выравнивает flex-элементы по нижней части контейнера. Элементы выравниваются на основе края поперечного поля гибких элементов.
- center: это значение выравнивает гибкие элементы по центру контейнера. Элементы выравниваются на основе середины краев начального и конечного полей гибких элементов.
- stretch: это значение растягивает гибкие элементы, чтобы заполнить контейнер по вертикали. Элементы растягиваются, чтобы соответствовать высоте контейнера на основе их значений flex-grow и flex-shrink.
- baseline: это значение выравнивает flex-элементы так, чтобы их базовые линии совпадали. Элементы выравниваются на основе их базовой линии, которая определяется свойствами font-size и line-height.
.container {
align-items: stretch | flex-start | flex-end | center | baseline
}
выравнивание содержимого
Свойство align-content используется для вертикального выравнивания нескольких строк flex-элементов внутри контейнера, когда вдоль поперечной оси есть дополнительное пространство. Это применимо только тогда, когда есть несколько строк flex-элементов, созданных либо с помощью flex-wrap: wrap, либо когда недостаточно места для всех элементов в одной строке. Вот описания для каждого возможного значения:
- flex-start: это значение выравнивает строки гибких элементов в верхней части контейнера.
- flex-end: это значение выравнивает строки гибких элементов в нижней части контейнера.
- center: это значение центрирует строки гибких элементов вертикально в контейнере.
- space-between: это значение распределяет строки гибких элементов равномерно вдоль поперечной оси, при этом первая строка находится вверху контейнера, а последняя строка внизу.
- space-around: это значение равномерно распределяет строки flex-элементов вдоль поперечной оси с одинаковым расстоянием между каждой строкой и верхней и нижней частью контейнера.
- stretch: это значение растягивает строки гибких элементов, чтобы заполнить контейнер по вертикали. Линии растягиваются, чтобы соответствовать высоте контейнера на основе их значений flex-grow и flex-shrink.
.container {
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline
}
разрыв, разрыв строки, разрыв столбца
gap, row-gap и column-gap — это свойства CSS, используемые в сочетании с макетом CSS flexbox. Эти свойства позволяют добавлять интервалы между гибкими элементами более эффективным способом, чем использование полей.
- gap: это свойство указывает размер промежутка между гибкими элементами как в горизонтальном, так и в вертикальном направлениях. Это сокращенное свойство для row-gap и column-gap и устанавливает значение для обоих.
Пример:
.container {
display: flex;
gap: 10px;
}
Этот код устанавливает зазор в 10 пикселей между всеми гибкими элементами внутри контейнера.
- row-gap: это свойство определяет размер промежутка между гибкими элементами только в вертикальном направлении.
Пример:
.container {
display: flex;
flex-direction: column;
row-gap: 10px;
}
Этот код устанавливает зазор в 10 пикселей между всеми строками flex-элементов в контейнере.
- column-gap: это свойство определяет размер промежутка между гибкими элементами только в горизонтальном направлении.
Пример:
.container {
display: flex;
column-gap: 10px;
}
Этот код устанавливает зазор в 10 пикселей между всеми столбцами гибких элементов в контейнере. Обратите внимание, что это свойство работает только в том случае, если для свойства flex-wrap установлено значение wrap или wrap-reverse.
Свойства Flexbox для детей (элементы)
заказ
Свойство order используется для изменения порядка flex-элементов в контейнере. По умолчанию все flex-элементы имеют значение порядка, равное 0. Вы можете установить для свойства order положительное или отрицательное целочисленное значение, чтобы изменить порядок flex-элемента.
Пример :
<div class="container">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
<div class="item item-4">4</div>
</div>
.container {
display: flex;
flex-wrap: wrap;
}
.item {
display: flex;
justify-content: center;
align-items: center;
}
.item-1 {
order: 2;
}
.item-2 {
order: 1;
}
.item-3 {
order: 3;
}
.item-4 {
order: 4;
}
В этом примере у нас есть контейнер с четырьмя гибкими элементами. Мы используем свойство order для изменения порядка элементов.
.item-1 имеет значение порядка 2, что означает, что он будет отображаться после .item-2.
.item-2 имеет значение порядка 1, что означает, что он будет отображаться первым.
.item-3 имеет значение порядка 3, что означает, что он будет отображаться после .item-1
.item-4 имеет значение порядка 4, что означает, что он будет отображаться последним.
Используя свойство order, мы можем изменить порядок flex-элементов внутри контейнера без изменения структуры HTML.
гибкий рост
Свойство flex-grow используется для указания того, насколько должен увеличиваться flex-элемент относительно других flex-элементов внутри того же контейнера. Это безразмерное значение, представляющее долю доступного пространства, которое должен занимать элемент.
Если для всех элементов flex-grow установлено значение 1, оставшееся пространство контейнера будет распределено поровну между всеми дочерними элементами. Если один из дочерних элементов имеет значение 2, этот дочерний элемент будет занимать в два раза больше места, чем другие (или, по крайней мере, попытается).
Вот пример:
.container {
display: flex;
width: 500px;
}
.item {
flex-grow: 1;
background-color: red;
}
В этом примере контейнер имеет ширину 500 пикселей и содержит три flex-элемента с классом .item. Свойство flex-grow устанавливается равным 1 для каждого элемента. Это означает, что каждый элемент должен занимать одинаковое количество свободного места в контейнере. Поскольку элементов три, каждый из них будет занимать треть доступного места.
Если мы добавим в контейнер еще один элемент и установим для его свойства flex-grow значение 2, вот так:
.container {
display: flex;
width: 500px;
}
.item {
flex-grow: 1;
background-color: red;
}
.item-4 {
flex-grow: 2;
background-color: blue;
}
Четвертый элемент будет занимать в два раза больше места, чем другие элементы, так как его значение flex-grow равно 2. Это означает, что он будет занимать две пятых доступного пространства, в то время как другие элементы будут занимать одну-две пятых. пятая каждый.
гибкая основа
Свойство flex-basis используется для установки начального размера гибкого элемента до того, как любое доступное пространство будет распределено между элементами.
Вот пример использования flex-basis:
.item {
flex-basis: 150px;
}
В этом примере для свойства flex-basis установлено значение 150 пикселей для класса .item. Это означает, что начальный размер элемента будет 150 пикселей, а оставшееся пространство будет распределено между другими гибкими элементами.
Важно отметить, что flex-basis — это лишь одно из свойств, управляющих размером flex-элементов. Два других — flex-grow и flex-shrink. Вместе эти свойства образуют так называемый «фактор гибкости», который определяет, как доступное пространство распределяется между элементами гибкости.
Вот пример того, как все три свойства работают вместе:
.item {
flex-basis: 150px;
flex-grow: 1;
flex-shrink: 0;
}
В этом примере свойство flex-basis устанавливает начальный размер элемента равным 150px. Свойство flex-grow имеет значение 1, что означает, что элемент будет увеличиваться пропорционально другим гибким элементам в контейнере, когда есть свободное место. Свойство flex-shrink установлено равным 0, что означает, что элемент не будет сжиматься, если в контейнере недостаточно места.
гибкая усадка
Свойство flex-shrink используется для указания того, насколько flex-элемент должен сжиматься относительно других flex-элементов в контейнере, когда на главной оси недостаточно места. Значение по умолчанию для flex-shrink равно 1, что означает, что все flex-элементы будут уменьшаться одинаково.
Вот пример, который показывает, как работает flex-shrink:
<div class="container">
<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>
<div class="box box3">Box 3</div>
</div>
.container {
display: flex;
}
.box {
flex-basis: 100px;
height: 100px;
border: 1px solid black;
}
.box1 {
flex-grow: 1;
flex-shrink: 1;
}
.box2 {
flex-grow: 1;
flex-shrink: 2;
}
.box3 {
flex-grow: 1;
flex-shrink: 3;
}
В этом примере у нас есть контейнер с тремя гибкими элементами. Каждый элемент имеет flex-базис 100px, который устанавливает начальный размер элементов. Свойство flex-grow установлено равным 1 для всех элементов, что означает, что все они будут расти одинаково, если на главной оси есть дополнительное пространство.
Однако свойство flex-shrink имеет разные значения для каждого элемента. Первый элемент имеет значение flex-shrink, равное 1, что означает, что он будет сжиматься пропорционально другим элементам, если места недостаточно. Второй элемент имеет значение flex-shrink, равное 2, что означает, что он будет сжиматься в два раза больше, чем первый элемент. Третий элемент имеет значение flex-shrink, равное 3, что означает, что он будет сжиматься в три раза больше, чем первый элемент.
Если в контейнере недостаточно места для размещения всех элементов в исходном размере, элементы с более высокими значениями flex-shrink сожмутся больше, чем элементы с более низкими значениями. Например, если ширина контейнера всего 250 пикселей, первый элемент сохранит свой первоначальный размер 100 пикселей, второй элемент уменьшится до 75 пикселей, а третий элемент уменьшится до 50 пикселей.
Заключение
В заключение, CSS Flexbox — это мощный инструмент для простого создания адаптивных макетов. Он обеспечивает простой и интуитивно понятный способ размещения элементов на веб-странице с минимальным объемом кода. В этом блоге мы рассмотрели все важные аспекты макета Flexbox, от основ до продвинутых концепций.
Мы узнали, как создать контейнер Flexbox, как настроить свойства Flexbox для дочерних элементов и как использовать Flexbox для создания адаптивных макетов. Мы также изучили некоторые менее известные свойства Flexbox, такие как gap, flex-basis и order.
Таким образом, CSS Flexbox является обязательным навыком для любого веб-разработчика. Это эффективный и современный способ создания адаптивных макетов, который в долгосрочной перспективе может сэкономить ваше время и усилия. Так что вперед, попробуйте и начните создавать красивые адаптивные макеты уже сегодня!
Подпишитесь на мою (бесплатную) еженедельную рассылку о писательстве и веб-разработке — https://sarveshh.beehiiv.com/subscribe
Если вам это понравилось, вам могут понравиться:
