flex 是 CSS 中用于设置弹性盒子（flexbox）的属性，用于定义弹性容器中子元素的布局和排列方式。弹性盒子是一种一维的布局模型，适用于构建复杂的、动态的页面布局。

具体的使用方式如下：
/* 语法 */
flex: flex-grow flex-shrink flex-basis;

/* 示例 */
.container {
  display: flex;
}

.item {
  flex: 1; /* 设置子元素的 flex 属性，表示相对空间的分配，这里是平均分配 */
}

/* 或者使用更简洁的语法 */
.container {
  display: flex;
}

.item {
  flex: 1; /* 设置子元素的 flex 属性，表示相对空间的分配，这里是平均分配 */
}

  •  flex-grow: 定义了项目的放大比例，默认值为 0，表示不放大。

  •  flex-shrink: 定义了项目的缩小比例，默认值为 1，表示按比例缩小。

  •  flex-basis: 定义了在分配多余空间之前，项目占据的主轴空间，默认值为 auto，表示项目的本来大小。


简写形式的 flex 属性为 flex: flex-grow flex-shrink flex-basis;，你也可以使用更简单的语法 flex: value;，其中 value 可以是一个数字（代表 flex-grow），也可以是 auto 或 none。

弹性布局中的 flex 属性非常灵活，通过合理的设置，可以轻松实现不同尺寸和比例的布局。这对于响应式设计和动态布局非常有用。请注意，flexbox 是一个强大的布局模型，但也需要一些学习和理解。


转载请注明出处：http://www.zyzy.cn/article/detail/6065/CSS