CSS中的flex属性被广泛应用于布局设计中，它可以很方便地实现基于容器的自适应布局，让HTML页面的排版工作更加简单易用。

.container {display: flex;}

上述代码就是一个基本的flex容器，它将子元素进行自适应排列，使得容器内的元素可以在一排中均匀分布，避免了我们手动进行像素单位下的对齐调整工作，节省了大量的时间和精力。

.item {flex: 1;}

在flex布局中，也经常使用到 item 的 flex属性，它可以设置元素子项在容器内的占比，来实现元素的自适应排列。一个flex值为 1 的 item 占据了容器中1份，也就是说，容器中有几个 item，他们就会按照自适应的方式占据各自的比例，便于我们快速进行产品界面等设计工作，使得设计更加符合用户要求。

.container {flex-wrap: wrap;}

最后，还有一个常用的 flex属性 - flex-wrap，它可以控制容器内的元素是否换行。这样，当容器中的元素数量过多时，页面会自动进行换行，排版更加美观规整。