在CSS中，我们可以使用许多不同的技术来创建网页布局，这些技术包括使用浮动（float）、定位（position）、显示属性（display）、表格（table）和Flexbox等，使用Flexbox是一种现代且高效的方式，因为它能够让我们轻松地对齐元素并创建灵活的布局。
以下是一个简单的示例，演示如何使用Flexbox来创建一个基本的网页布局：
<!DOCTYPE html>
<html>
<head>
<style>
/* 设置容器为Flexbox */
.container {
display: flex;
justify-content: space-between;
}
/* 设置左侧区域 */
.left-area {
flex: 1;
background-color: #f1f1f1;
padding: 20px;
}
/* 设置右侧区域 */
.right-area {
flex: 2;
background-color: #ddd;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="left-area">左侧区域</div>
<div class="right-area">右侧区域</div>
</div>
</body>
</html>
在上面的示例中，我们创建了一个包含两个区域的简单网页布局：左侧区域和右侧区域，我们使用了一个容器元素，并将其display属性设置为Flexbox，这使得我们可以轻松地对齐容器中的元素，我们还将justify-content属性设置为space-between，以将左侧和右侧区域分开，接下来，我们分别设置了左侧和右侧区域的样式，包括背景颜色、填充和flex属性，在Flexbox中，flex属性用于指定元素的大小，在这个例子中，我们将左侧区域的flex属性设置为1，而将右侧区域的flex属性设置为2，这意味着右侧区域将占用容器中可用空间的两倍，而左侧区域将占用可用空间的一半，我们将左侧和右侧区域放在容器元素中，以创建最终的网页布局，左侧和右侧区域将水平排列，并且右侧区域将占用更多的空间。
