Многоколоночный дизайн на Flexbox

Последнее обновление: 19.04.2017

Теперь рассмотрим, как мы можем сделать простейшие многоколонночные макеты страницы с помощью Flexbox.

Двуколоночный дизайн

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Flexbox в CSS3</title>
        <style>
			*{
				box-sizing: border-box;
			}
			html,
			body {
				padding: 0;
				margin: 0;
				font-family: verdana, arial, sans-serif;
			}

			body {
				display: flex;
				padding: 1em;
				flex-direction: column;
			}

			.item {
				background-color: #455a64;
				color: #fff;
				font-size: 1.1em;
				padding: 1em;
			}

			.item:nth-child(even) {
				background-color: #607d8b;
			}
			@media screen and (min-width: 600px) {
    
				body {
					flex-direction: row;
				}
			}
        </style>
    </head>
    <body>
		<div class="item">
			<h2>Что такое Lorem Ipsum?</h2>
            <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является 
			стандартной "рыбой" для текстов на латинице с начала XVI века...</p>
        </div>
            
        <div class="item">
            <h2>Откуда он появился?</h2>
			<p>Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. 
			Его корни уходят в один фрагмент классической латыни 45 года н.э...</p>
        </div>
	</body>
</html>

Здесь flex-контейнером является элемент body. Так как на мобильных устройствах (особенно смартфонах) размер экрана не такой большой, поэтому по умолчанию устанавливаем расположение элементов в столбик. Однако для устройств с экраном от 600рх и выше действует правило media-query, которое устанавливает расположение в виде строки.

Двуколоночный режим в Flexbox и CSS3

Трехколоночный режим

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Flexbox в CSS3</title>
        <style>
			*{
				box-sizing: border-box;
			}
			html,
			body {
				padding: 0;
				margin: 0;
				font-family: verdana, arial, sans-serif;
			}

			body {
				display: flex;
				padding: 1em;
				flex-direction: column;
			}

			.item {
				background-color: #455a64;
				color: #fff;
				font-size: 1.1em;
				padding: 1em;
				flex: 1;
			}

			.item:nth-child(1) {
				background-color: #607d8b;
			}
			@media screen and (min-width: 600px) {
    
				body {
					flex-direction: row;
				}
				.item:nth-child(2) {
					order: -1;
				}
			}
        </style>
    </head>
    <body>
		
		<div class="item">
			<h1>Что такое Lorem Ipsum?</h1>
            <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" 
			для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал ...</p>
        </div>
        
		<div class="item">
            <h3>Классический текст Lorem Ipsum, используемый с XVI века</h3>
			<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore 
			magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
        </div>
        <div class="item">
            <h3>Где его взять?</h3>
			<p>Есть много вариантов Lorem Ipsum, но большинство из них имеет не всегда приемлемые модификации, например, 
			юмористические вставки или слова, которые даже отдалённо не напоминают латынь.</p>
        </div>
	</body>
</html>

В отличие от предыдущего примера здесь добавлен еще один элемент. Особенностью этого примера является то, что столбцы имеют одинаковые размеры. Для этого у них установлено свойство flex: 1, то есть при растяжении или уменьшении границ контейнера все элементы будут масштабироваться на равную величину.

И кроме того, при ширине экрана больше 600px у второго элемента устанавливается свойство order: -1, благодаря чему этот элемент помещается первым:

Трехколоночный режим с равными столбцами в Flexbox и CSS3

Подобным образом мы можем добавить и большее количество столбцов. Но в данном случае по умолчанию столбцы имеют одинаковую ширину. Но что делать, если один из столбцов (как правило, центральный) должен иметь ширину больше, чем у остальных? Для этого добавим в стили страницы следующее правило:

.item:first-child {
	flex: 0 0 50%;
}

В этом случае первый элемент всегда будет занимать 50% пространства контейнера:

Трехколоночный дизайн в Flexbox и CSS3

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850