CSS中的flex（Flexbox），是一种灵活的布局模式，使你能够更方便地布置网页元素。

Flexbox通过创建相对父级容器（flex容器）和子容器（flex项目）并指定它们的可伸缩性属性和空间分配等属性来工作。

Flexbox可以用于多种多样的布局设计，如水平和垂直居中、两栏布局、三栏布局、网格布局等等。以下是一个常见的 flex 示例，其中包含一个带有三个子容器（flex项目）的flex容器：

.container {
display: flex; /* 创建flex容器 */
justify-content: center; /* 横向居中 */
align-items: center; /* 纵向居中 */
}
.item {
flex: 1; /* 指定子容器的可伸缩性 */
margin: 10px; /* 子容器之间的空白 */
}

在上面的示例中，我们通过指定display: flex将.container元素转换为flex容器，并指定justify-content和align-items属性，使其沿横向和纵向居中。我们还通过flex属性指定了.item元素的可伸缩性，使它们根据容器尺寸自动分配空间。

总结来说，flex是一种强大的布局模式，是实现各种灵活布局的最佳工具之一。学习并掌握其使用方法，可以让你更高效地进行网页布局设计。