CSS Flexbox

Концепция Flexbox была разработана, чтобы упростить задачу создания гибких и адаптивных макетов на веб-страницах. Flexbox предоставляет нам более простой и интуитивный подход к созданию макетов на основе блоков и их позиционирования, чем традиционный CSS.

Flexbox позволяет создавать сложные макеты, где элементы могут быть размещены в различных направлениях, настраивать расстояние между элементами, и изменять размеры элементов, в зависимости от доступного места на экране.

Основная концепция

Перед тем, как мы погрузимся в детали Flexbox, давайте рассмотрим основную концепцию, которую вам нужно знать.

Контейнер Flexbox - это элемент, который содержит дочерние элементы, которые мы хотим расположить внутри макета.
Элементы Flexbox - это дочерние элементы, которые находятся внутри контейнера Flexbox. Эти элементы будут позиционироваться и выравниваться в соответствии с правилами, определенными в контейнере Flexbox.

Основные свойства

Существует несколько свойств, которые определяют поведение Flexbox. Вот некоторые из них:

display: определяет тип контейнера. Для создания контейнера Flexbox, нужно установить значение display на flex.
```
.container {
  display: flex;
}
```
flex-direction: Свойство flex-direction определяет направление, в котором располагаются элементы внутри контейнера Flexbox. Значение этого свойства может быть одним из четырех вариантов: row, row-reverse, column и column-reverse.
```
.container {
  display: flex;
  flex-direction: row;
}
```
justify-content: Свойство justify-content определяет, как контейнер Flexbox распределяет свои элементы по оси главного направления (основной оси). В зависимости от выбранного значения, элементы могут быть выровнены по левому краю, по центру, по правому краю, равномерно распределены по всей ширине контейнера или даже выравниваться с помощью отступов между элементами.
```
.container {
  display: flex;
  justify-content: center;
}
```
align-items: Свойство align-items определяет, как контейнер Flexbox распределяет свои элементы по поперечной оси (второстепенной оси). Это свойство может устанавливать выравнивание элементов вверху, по центру, внизу, распределение элементов с помощью отступов между ними или масштабирование элементов.
```
.container {
  display: flex;
  align-items: center;
}
```
flex-wrap: Свойство flex-wrap определяет, переносится ли содержимое контейнера Flexbox на новую строку, если элементы не помещаются в одну строку. Это свойство может устанавливать значение nowrap (по умолчанию), которое заставляет элементы помещаться на одной строке, wrap, которое позволяет элементам переноситься на новую строку, когда они не помещаются на одной строке, и wrap-reverse, которое делает то же самое, что и wrap, но в обратном порядке.
```
.container {
  display: flex;
  flex-wrap: wrap;
}
```
flex-grow: Свойство flex-grow определяет, насколько большой относительно других элементов будет элемент внутри контейнера Flexbox. Это свойство устанавливает, сколько доступного пространства на основной оси (главной оси) займет элемент. Значения свойства являются положительными числами. Когда у элементов в контейнере Flexbox есть свободное пространство, оно распределяется между элементами в соответствии с их значениями свойства flex-grow. Если у одного элемента значение flex-grow равно 1, а у другого - 2, то второй элемент займет в два раза больше свободного пространства, чем первый.
```
.item {
  flex-grow: 2;
}
```
В этом примере элементу с классом .item будет выделено в два раза больше свободного пространства, чем элементам с flex-grow: 1.
flex-shrink: Свойство flex-shrink определяет, насколько сильно элемент может уменьшаться в размере на основной оси (главной оси), чтобы поместиться в контейнере Flexbox. Это свойство устанавливает, сколько пространства элемент может освободить на основной оси, если это необходимо. Значения свойства также являются положительными числами.
```
.item {
  flex-shrink: 2;
}
```
flex-basis: Свойство flex-basis устанавливает базовую ширину элемента внутри контейнера Flexbox. Значение свойства может быть установлено в пикселях, процентах или ключевых словах, таких как auto, которое означает, что ширина элемента определяется его содержимым.
```
.item {
  flex-basis: 100px;
}
```
В этом примере элемент с классом .item будет иметь базовую ширину равную 100 пикселям.
flex: Свойство flex является сокращением для свойств flex-grow, flex-shrink и flex-basis. Синтаксис свойства flex выглядит следующим образом:
```
.item {
  flex: 1 0 auto;
}
```
Это означает, что элемент будет растягиваться и сжиматься, если необходимо, и его базовая ширина будет определяться его содержимым. То есть, значение 1 устанавливает flex-grow: 1, 0 - flex-shrink: 0, а auto - flex-basis: auto. Также возможно указание только двух значений: например, flex: 1 0, в этом случае значение flex-basis будет установлено на auto.
```
.item {
  flex: 1;
}
```
В этом примере элемент с классом .item будет растягиваться, если есть свободное пространство, но не будет сжиматься, даже если доступное пространство недостаточно.
align-self: Свойство align-self устанавливает выравнивание элемента внутри контейнера Flexbox по вертикали. Значение свойства может быть установлено на auto, flex-start, flex-end, center, baseline или stretch. Значение auto наследует значение свойства align-items из родительского контейнера.
```
.item {
  align-self: center;
}
```
В этом примере элемент с классом .item будет выровнен по центру внутри контейнера Flexbox.

Flexbox предоставляет различные инструменты для управления расположением элементов на странице. Он позволяет легко располагать элементы по горизонтали и вертикали, контролировать их размеры и изменять порядок их следования. При правильном использовании Flexbox можно значительно упростить и ускорить создание адаптивных макетов.

Пример использования Flexbox

Вкачестве примера приводим код страницы с исползованием Flexbox:

<!DOCTYPE html>
<html>
<head>
	<title>Flexbox Example Page</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			font-family: Arial, sans-serif;
		}

		header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #333;
			color: #fff;
			padding: 20px;
		}

		nav {
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #ddd;
			padding: 10px;
		}

		nav ul {
			display: flex;
			list-style: none;
			margin: 0;
			padding: 0;
		}

		nav li {
			margin: 0 10px;
		}

		main {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			align-items: flex-start;
			padding: 20px;
			background-color: #f1f1f1;
		}

		.card {
			flex: 0 1 calc(30% - 40px);
			max-width: calc(30% - 40px);
			background-color: #fff;
			padding: 20px;
			margin-bottom: 20px;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
		}

		.card img {
			width: 100%;
			height: auto;
			margin-bottom: 10px;
		}

		.card h2 {
			font-size: 24px;
			margin-bottom: 10px;
		}

		.card p {
			font-size: 16px;
			line-height: 1.5;
			margin-bottom: 10px;
			text-align: center;
		}

		.card a {
			display: inline-block;
			background-color: #333;
			color: #fff;
			padding: 10px 20px;
			border-radius: 5px;
			text-decoration: none;
			margin-top: 10px;
		}
	</style>
</head>
<body>
	<header>
		<h1>Flexbox Example Page</h1>
		<form>
			<input type="search" name="search" placeholder="Search...">
			<button type="submit">Search</button>
		</form>
	</header>
	<nav>
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Products</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</nav>
	<main>
		<div class="card">
			<img src="https://via.placeholder.com/400x200" alt="Product 1">
			<h2>Product 1</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae dui sed lacus tincidunt tristique. Donec accumsan luctus felis, vel rhoncus nisi fermentum nec.</p>
			<a href="#">Learn More</a>
		</div>
		<div class="card">
			<img src="https://via.placeholder.com/400x200" alt="Product 2">
			<h2>Product 2</h2>
			<p>Quisque eget ipsum at urna hendrerit posuere. Sed hendrerit elit ipsum, sit amet aliquam purus placerat ut. Sed euismod orci sit amet nibh aliquet, non ultrices ex laoreet.</p>
			<a href="#">Learn More</a>
		</div>
		<div class="card">
			<img src="https://via.placeholder.com/400x200" alt="Product 3">
			<h2>Product 3</h2>
			<p>Nam commodo pharetra magna vel ornare. Nulla viverra tincidunt dolor eget volutpat. Sed fermentum massa sed justo tristique tincidunt. Nulla quis leo eu ipsum dignissim elementum.</p>
			<a href="#">Learn More</a>
		</div>
		<div class="card">
			<img src="https://via.placeholder.com/400x200" alt="Product 4">
			<h2>Product 4</h2>
			<p>Integer bibendum consectetur risus a scelerisque. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
			<a href="#">Learn More</a>
		</div>
		<div class="card">
			<img src="https://via.placeholder.com/400x200" alt="Product 5">
			<h2>Product 5</h2>
			<p>Vestibulum aliquet diam non risus pellentesque, in eleifend lacus pretium. Sed at odio vitae mi imperdiet venenatis vel non odio. Ut non tortor in nisi dictum molestie.</p>
			<a href="#">Learn More</a>
		</div>
		<div class="card">
			<img src="https://via.placeholder.com/400x200" alt="Product 6">
			<h2>Product 6</h2>
			<p>Aliquam rutrum euismod urna a mollis. Ut eget ante ante. Fusce sagittis leo vel sapien bibendum lacinia. Suspendisse at nunc commodo, ultricies turpis ac, pellentesque velit.</p>
			<a href="#">Learn More</a>
		</div>
	</main>
</body>
</html>

Результат кода

Потестировать код на отдельной странице

В этом примере использованы следующие элементы Flexbox:

Для расположения элементов внутри заголовка <header> используется display: flex и justify-content: space-between, чтобы выровнять элементы по главной оси и создать пространство между ними.
Для расположения элементов меню <nav> используется display: flex и justify-content: center, чтобы выровнять элементы по главной оси и расположить их по центру.
В основной области контента <main> используется display: flex и flex-wrap: wrap, чтобы элементы переносились на новую строку при достижении границы контейнера. justify-content: space-between используется для выравнивания элементов по главной оси и создания пространства между ними.

Внутри каждой карточки <div class="card"> используется display: flex, чтобы выровнять элементы по главной оси. flex-direction: column устанавливает направление элементов по оси, чтобы заголовок, текст и ссылка располагались вертикально друг под другом. align-items: center выравнивает элементы по второстепенной оси, чтобы элементы были по центру вертикально. flex-grow: 1 устанавливает, что элементы могут растягиваться по оси, чтобы занять всё доступное пространство.

Таким образом, пример страницы с использованием Flexbox демонстрирует, как можно использовать различные свойства Flexbox для создания адаптивного макета. С помощью display: flex, justify-content, align-items и других свойств можно контролировать расположение элементов на странице, а flex-grow и другие свойства позволяют гибко настраивать размеры и распределение элементов внутри контейнера.

Другие статьи о CSS

CSS
Основы CSS	Размер блока Оформление линий Оформление таблиц Выравнивание блока Два блока рядом Настройка ссылок Настройка фона Настройка шрифта Отступы Оформление картинок Галерея картинок Оформление кнопок Оформление списков Оформление иконок Курсор в CSS Навигационная панель Выпадающее меню Формы в CSS Вёрстка шаблона сайта
Продвинутый CSS	CSS Flexbox CSS Grid Медиа-запросы CSS CSS-препроцессоры CSS-фреймворки
Дополнительные темы	Адаптивный дизайн Трансформации CSS CSS переменные Адаптивные изображения Анимация Стилизация форм Темная тема Адаптивный текст
Список всех свойств CSS • HTML • Портал CSS

Энциклопедия CSS
Текст и шрифты:	color font-family font-size font-weight line-height text-align text-decoration text-transform
Размеры и отступы:	width height margin padding border max-width max-height
Фоновые свойства:	background background-color background-image background-size background-position
Позиционирование и отображение:	position top right bottom left display z-index float clear
Анимации и переходы:	transition animation transform
Границы и тени:	border-radius box-shadow outline
Гриды и флексы:	display: flex flex-wrap justify-content align-items grid-template-columns grid-template-rows grid-gap
Прочие свойства:	overflow clip-path cursor visibility
• Портал Программистов • Портал CSS •