CSS中的Flexbox布局如何轻松实现各种页面布局需求？

Flexbox布局提供了一种简单的方法来在不同方向上组织和分配容器内的项目，无论是水平还是垂直。以下是一些使用Flexbox实现的常见页面布局的示例代码：

1. 水平居中的内容：

.container {
  display: flex;
  justify-content: center;
}

2. 垂直居中的内容：

.container {
  display: flex;
  align-items: center;
  height: 100vh; /* 使用容器的完整高度 */
}

3. 水平和垂直居中的内容：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

4. 左对齐的菜单和主内容区：

.container {
  display: flex;
}
 
.menu {
  flex: 1; /* 根据需要调整 */
}
 
.content {
  flex: 3; /* 根据需要调整 */
}

5. 响应式网格布局：

.container {
  display: flex;
  flex-wrap: wrap;
}
 
.item {
  flex: 1;
  margin: 10px; /* 间距 */
}
 
/* 根据屏幕大小调整列数 */
@media (max-width: 600px) {
  .item {
    flex-basis: 100%; /* 移动设备上每项占据全部宽度 */
  }
}

Flexbox 提供了一种强大而灵活的方式来创建复杂的布局，并且可以很容易地适应不同的屏幕尺寸和设备。