@GeorgeKay

Когда работаешь c flexbox, как правильно создать стандартную сетку?

5ad642dce9b77470057081.jpeg
Допустим вот такой код
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Швейный кластер</title>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<div class="main">
		<div class="header"></div>
		<div class="content">
			<div class="inner-content"></div>
			<div class="inner-sidebar"></div>
		</div>
		<div class="footer"></div>
	</div>
</body>
</html>

Как правильно использовать flexbox? Нужно сделать main контейнером?, а внутри него header, content, footer сделать элементами контейнера? Если так можно ли потом сделать из header, content, footer тоже контейнеры. Или сразу header, content, footer делать контейнерами без main и работать с ними по отдельности. И еще при работе с flexbox нужно ли делать кучу блоков в блоках, как при работе с float? Допустим создавать кучу inner
<body>
	<div class="wrapper">
		<div class="header">
			<div class="inner-header"></div>
		</div>
		<div class="row">
			<div class="content">
				<div class="inner-content"></div>
			</div>
			<div class="sidebar">
				<div class="inner-sidebar"></div>
			</div>
		</div>
		<div class="footer">
			<div class="inner-footer"></div>
		</div>
	</div>
</body>
  • Вопрос задан
  • 212 просмотров
Пригласить эксперта
Ответы на вопрос 4
@Faraday_22
Сетку можно взять из бутстрап4, там отличная сетка на флексах
Ответ написан
Комментировать
@Jumandjilos
Ну обычно лучше все же делать блок-обертку сайта, далее из header, footer ит.д. конечно можно сделать контейнеры. Кучу блоков делать не нужно, flex гораздо проще, чем float, лучше посмотри пару видео на ютубе, где базово говорят про flex и всё поймешь, так в двух словах объяснил как могу
Ответ написан
Комментировать
Rema1ns
@Rema1ns
и так сойдет
Ответ написан
Комментировать
@IriniSh
Никаких дополнительных оберток делать не нужно. Для родителя задаете display: flex и все его дочерние элементы будут выровнены по flex-сетке. Из вашего 1 примера это
.main {
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
}
.header, .content, .footer { width: 100%; }
Потом делаем основное содержимое
.content {
display: flex;
flex-flow: row nowrap;
}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы