My first question is : The difference between Flex vs Grid when creating a website. Is it when you do display:flex that your body for example shrinks automated and makes it smaller and smaller when with grid area template for example and when you make your screen smaller the information dissapears / does not go automated with your new widths.
Second question : In this example here with Flex. When i make my browser smaller and width smaller then articles get under my aside so the main content starts to expand under the aside/main. Which i want when i make screen smaller that articles stay in this grey area and get below eachother in this same light grey area.
body {
width: 70%;
margin: 0 auto;
font-family: sans-serif;
color: #2a2a2a;
background-color: grey;
}
header{
grid-area:header;
}
header ul{
display:flex;
}
header li{
list-style:none;
flex:1;
}
main {
display: flex;
flex-wrap: wrap;/*maakt da je inhoud in je div blijft er niet buiten als je width aanpast*/
align-content: flex-start;
background-color: lightgrey;
}
aside {
flex: 1; /*is zelfde als 1fr in display:grid*/
margin-right: 10px;
background-color: #ff80ff;
}
#artikel1 {
flex:2;
}
#artikel2 {
flex:2;
}
#artikel3 {
flex:2;
}
#artikel4 {
flex:2;
}
aside li {
padding-bottom: 10px;
}
footer {
margin-top: 10px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SCSS</title>
<link rel="stylesheet" href="training.css">
<style>
</style>
</head>
<body>
<div class="container">
<header>
<nav>
<ul><li>Home</li><li>Contact</li><li>Nog informatie</li><li>content</li></ul>
</nav>
</header>
<main>
<!-- the aside content can also be nested within the main content -->
<aside>
<h2>Related</h2>
<ul>
<li><a href="#">Oh I do like to be beside the seaside</a></li>
<li><a href="#">Oh I do like to be beside the sea</a></li>
<li><a href="#">Although in the North of England</a></li>
<li><a href="#">It never stops raining</a></li>
<li><a href="#">Oh well...</a></li>
</ul>
</aside>
<!-- It contains an article -->
<article id="artikel1">
<h2>Article heading</h2>
<p>
tekst artikel 1
</p>
<h3>titel2</h3>
<p>
artikel2
</p>
</article>
<article id="artikel2">
<h2>Article heading</h2>
<p>
tekst artikel 1
</p>
<h3>titel2</h3>
<p>
artikel2
</p>
</article>
<div class="break"></div>
<article id="artikel3">
<h2>Article heading</h2>
<p>
tekst artikel 1
</p>
<h3>titel2</h3>
<p>
artikel2
</p>
</article>
<article id="artikel4">
<h2>Article heading</h2>
<p>
tekst artikel 1
</p>
<h3>titel2</h3>
<p>
artikel2
</p>
</article>
</main>
<footer>
</footer>
</div>
</body>
</html>I tried many possibilities.
