Меню
✘Скрыть меню
Меню заработка
✘Скрыть меню
Загрузка.. nostroma.online from NOSTROMA - best life and beautiful workЭто ужасно тяжелая работа — ничего не делать – Оскар УайльдРешающую роль в работе играет не всегда материал, но всегда мастер – Максим ГорькийЯ слишком энергичен, чтобы работать – Марсель АшарЧто привлекло меня в карьере писателя? Отсутствие бумажной работы.Одни люди работают только для того чтобы работать, другие – для того, чтобы иметь возможность не работать в будущем.Занятие ерундой на рабочем месте развивает боковое зрение, слух и бдительность в целомСтоит статýя в лучах заката с огромным буем, в руках - граната.Друзья, если вы попались на лохотрон, не будьте эгоистами - предупредите других о таком сайте!Секрет гения — это работа, настойчивость и здравый смысл. Томас Эдисон
Меню заработка

Курсы HTML/CSS

Урок №29. Макетирование страниц c применением Flexbox

Содержание курса

Макетирование страниц c применением Flexbox

Мы уже кратко рассмотрели макетирование с применением flex-блоков в 26-ом уроке. Давайте теперь рассмотрим эту тему более подробно.

Основным понятием flex макетирования является flex-контейнер, который объявляется одним из значений свойства CSS:

	display: flex;
	display: inline-flex;

Если мы задаём контейнеру одно из этих свойств, то он будет вести себя по отношению к соседним как блочный (display: flex;) или блочно-строчный (display: inline-flex;) элемент:

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Flexbox</title>
			<style>
			
				.container1, .container2, .container3, .container4, .container5,
				.container6 {
					width: 100px;
					height: 100px;
					background: MediumAquamarine;
					margin: 10px;
					}
			
				.container1 {
					display: block;
					}
				
				.container2 {
					display: flex;
					}
					
				.container3 {
					display: block;
					}
					
				.container4 {
					display: inline-block;
					}
					
				.container5 {
					display: inline-flex;
					}
					
				.container6 {
					display: inline-block;
					}
			
			</style>
		</head>
		<body>
		
			<div class="container1">Блок</div>
			<div class="container2">Flex-блок</div>
			<div class="container3">Блок</div>
			
			<div class="container4">Блочно-строчный элемент</div>
			<div class="container5">Блочно-строчный flex-элемент</div>
			<div class="container6">Блочно-строчный элемент</div>
		
		</body>
	</html>

Результат отображения:

Если для блочно-строчного flex-элемента добавить свойство vertical-align: top; то он выравнится по верхней линии с обычными блочно-строчными элементами.

Давайте теперь разберём как работает flex с дочерними элементами:

justify-content - свойство, которое задаёт правила размещения дочерних элементов внутри родительского, если они не занимают всю его площадь.

Возможные значения:

justify-content
Значение Описание
flex-start элементы располагаются начиная от левого верхнего угла flex-контейнера
flex-end элементы располагаются начиная от правого верхнего угла flex-контейнера
center элементы располагаются по центру flex-контейнера
space-between элементы располагаются равномерно по ширине flex-контейнера
space-around элементы располагаются равномерно по ширине flex-контейнера с отступами с левой и правой стороны

Рассмотрим пример с применением свойства justify-content:

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Flex: дочерние элементы</title>
			<style>
			
				.parent {
					display: flex;
					justify-content: space-around;
					width: 600px;
					height: 600px;
					background: #ff0;
					margin: 100px auto;
					}
					
				.child {
					width: 50px;
					height: 100px;
					background: #20b2aa;
					border: 2px solid #fff;
					font-size: 48px;
					}
					
				.child-wide {
					width: 150px;
					}
			
			</style>
		</head>
		<body>
		
		<div class="parent">
			<div class="child">1</div>
			<div class="child">2</div>
			<div class="child child-wide">3</div>
			<div class="child">4</div>
			<div class="child">5</div>
		</div>
		
		</body>
	</html>

Результат отображения:

Свойство flex-direction задаёт направление элементов во flex-контейнере.

flex-direction
Значение Описание
row flex-элементы располагаются в строку слева направо, первый элемент расположен в левом верхнем углу flex-контейнера
row-reverse flex-элементы располагаются в строку справа налево, первый элемент расположен в правом верхнем углу flex-контейнера
column flex-элементы располагаются в столбец, первый элемент расположен в левом верхнем углу flex-контейнера
column-reverse flex-элементы располагаются в столбец, первый элемент расположен в левом нижнем углу flex-контейнера

flex-wrap - свойство переноса строк во flex-контейнере.

flex-wrap
Значение Описание
nowrap без переносов
wrap элементы переносятся на новую строку, сохраняя свои размеры
wrap-reverse элементы переносятся на новую строку, сохраняя свои размеры, первый элемент расположен в левом нижнем углу

Общее (составное) свойство flex-flow позволяет задать свойства flex-direction и flex-wrap через пробел: flex-flow: column wrap;

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

align-items
Значение Описание
stretch flex-блоки растягиваются, занимая всё доступное место по вертикали, при этом учитываются min-width и min-height если они заданы, значение по умолчанию
baseline выравнивает flex-элементы по базовой линии
flex-start flex-элементы прижимаются к верхней части flex-контейнера
flex-end flex-элементы прижимаются к нижней части flex-контейнера
center flex-элементы располагаются по центральной линии flex-контейнера

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

align-content
Значение Описание
flex-start выравнивает строки относительно начала flex-контейнера
flex-end выравнивает строки относительно конца flex-контейнера
center строки выравниваются по центру flex-контейнера
space-between распределяет строки равномерно (первая строка в начале строки, последняя - в конце)
space-around строки распределяются равномерно с равным расстоянием между собой
stretch строки растягиваются, заполняя свободное пространство (значение по умолчанию)

Комментарии

Введите Ваше имя:*

Введите e-mail:

Ваш комментарий:*

* Обязательные поля