Serhii_Kolesnyk
@Serhii_Kolesnyk
Учусь и развиваюсь. Не судите строго.

При медиа запросе flex-diraction:colom, как уменьшить ширину блоков и поместить по центру?

Задача: при уменьшении экрана от 1150px блоки должны перестраиваться в другом порядке в колонну и менять свою ширину и высоту. С данным кодом при перестраивании блоков они растягиваются на всю ширину экрана. Изменить ширину получилось с помощью width но как их разместить по центру и увеличить высоту?
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8"/>
		<title>CAGE MANAGEMENT</title>
		<link href="try.css" rel="stylesheet" type="text/css"/>
		<meta name="vievport" content="width=device-width">
	</head>

	<body>
		<div class="content">	
				<div class="block1">
					men
				</div>
				<div class="block2">
					logo
				</div>
				<div class="block3">
					women
				</div>
		</div>
	</body>
</html>


@media(max-width: 1150px){
	.content{
		max-width: 500px;
		flex-direction: column;
	}
	.block2{
		order: -1;
	}
	
}
.content{
	width: 100%;
	max-width: 1100px;
	height: 615px;
	margin: 2.5% auto;
	background-color: red;
	display: flex;
}
.content div{
	border:1px solid silver;
}

.block1{
	background-color: green;
	height: 500px;
	flex: 1;
}

.block2{
	background-color: green;
	flex: 1.2;
	
}

.block3{
	background-color: green;
	height: 500px;
	flex: 1;
}
  • Вопрос задан
  • 344 просмотра
Решения вопроса 1
@McBernar
Align-items: center
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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