CSS Flex是一种新型的布局方式，它能够帮助我们更简单地实现复杂布局。在这篇文章中，我们将学习如何使用CSS Flex实践一些常见的布局需求。

1. 垂直居中

.container {
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}

通过将容器设为CSS Flex布局，并设置子元素的justify-content和align-items属性为center，我们可以轻松实现垂直居中的布局。

2. 等高布局

.container {
display: flex;
}
.item {
flex: 1;
}

当我们希望子元素的高度相等时，可以将容器设置为CSS Flex布局，并使用flex属性将子元素占据容器的比例设置为相等。这样就能够实现等高布局。

3. 流式布局

.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex: 1;
min-width: 320px;
}

当用户界面需要支持流式布局时，我们可以使用CSS Flex实现。将容器设置为CSS Flex布局，并使用flex-wrap属性将子元素分行。使用flex属性控制子元素大小，最小宽度可以使用min-width属性设置。这样就能够实现流式布局。

4. 左右布局

.container {
display: flex;
}
.item {
flex: 1;
}
.item.left {
order: 1;
}
.item.right {
order: 2;
}

在一些场景下，我们希望左右两边的容器大小是自适应的。CSS Flex提供了一个order属性，可以用于修改子元素的相对顺序。通过将左边容器的order设为1，右边容器的order设为2，我们可以实现左右布局。

总结

以上是使用CSS Flex实践常见布局需求的示例。Flex布局的优势在于简单易用，新颖灵活，完美支持响应式设计。使用Flex布局能够让我们快速实现高效的用户界面设计。