- 此问题在此处已有答案**：
CSS-only masonry layout（5个答案）
Areas covered by Flexbox which are difficult or impossible to achieve with Grid（3个答案）
4小时前关门了。
我的第一个问题是：Flex与Grid在创建网站时的区别是：当你显示Flex时，你的身体会自动收缩，使它越来越小，当你使用网格区域模板时，信息会随着你的新宽度而消失/不自动化。
第二个问题：在这个例子中使用Flex。当我把浏览器变小，宽度变小时，文章会在我的aside下面，所以主要内容开始在aside/main下面扩展。这是我想要的，当我把屏幕变小时，文章会留在这个灰色区域，并且在这个相同的浅灰色区域中互相重叠。
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>我尝试了很多可能性。
2条答案
按热度按时间dl5txlt91#
Grid：CSS Grid Layout，是一个基于网格的二维布局系统，有行和列，使网页设计更容易，而不必使用浮动和定位。像表格一样，网格布局允许我们将元素对齐成列和行。Flexbox：CSS Flexbox提供了一维布局。它有助于在容器（由网格组成）中的项目之间分配和对齐空间。它适用于所有类型的显示设备和屏幕大小
mwngjboj2#
比较这两种设计，主要的区别是CSS Grid更适合创建二维布局，而CSS Flexbox更适合创建一维设计。此外，使用CSS Grid，元素使用数字坐标定位，而Flexbox使用相对定位和边距。