Задача: при уменьшении экрана от 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;
}
Простой