Итак, есть макет, который я смог написать на гридах и гридах+флекс, мне также нужно написать этот макет ещё и без помощи гридов. Суть вопроса в том, что флекс элементы, почему-то отказываются занимать пространство на странице, как бы я не пробовал им прописывать свойства. В чём загвоздка и где я что-то пропускаю?
Вот собственно сам макет, как должен выглядеть ( тут он написан на грид+флекс )
А вот что получается онли на флексбокс -
Вот исходники -
Html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<header>
<h1>Header</h1>
</header>
<div class="container">
<nav>
<strong>Navigation</strong>
</nav>
<main>
<h1>Main</h1>
</main>
<div class= "RelationLinks">
<strong>Related Links</strong>
</div>
</div>
<footer>Footer</footer>
</body>
</html>
CSS:
body{
display: flex;
flex-direction: column;
}
header{
background:rgb(78, 78, 236) ;
text-align: center;
padding: 20px;
color:azure;
width: auto;
}
.container{
display: flex;
flex-direction: row;
}
nav{
background: rgb(230, 163, 40);
padding: 20px;
flex-grow: 1;
}
main{
background: white;
padding: 20px;
flex-grow: 5;
}
main h1{
text-align: center;
color: rgb(78, 86, 202);
}
.RelationLinks{
background: rgb(238, 11, 49);
padding: 20px;
flex-grow: 1;
}
footer{
background: green;
padding: 20px;
color: azure;
text-align: center;
width: auto;
}
Нужно будет добавить ещё медиазапрос на мелкие экраны, но я знаю как это сделать, мне главное с полным экраном разобраться.
Простой
