CSS flex 属性

Flexbox 是一种用于在容器中布局子元素的强大工具。使用 Flexbox，我们可以轻松地创建灵活的布局，使得我们的网页能够更好地适应不同的屏幕尺寸和设备。

flex-container 属性

Flexbox 布局的核心是将容器设置为 display: flex 或 display: inline-flex。这样会将容器内的子元素变成弹性项目，从而实现灵活的布局。

示例代码：

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

在上面的示例中，我们将 .flex-container 设置为 Flexbox 容器，并使用 justify-content 和 align-items 属性来水平和垂直居中容器内的子元素。

flex-direction 属性

flex-direction 属性用于指定弹性容器内子元素的排列方向。默认值为 row，即水平排列。

示例代码：

.flex-container {
  display: flex;
  flex-direction: column;
}

在上面的示例中，我们将 .flex-container 的子元素按照垂直方向排列。

flex-wrap 属性

flex-wrap 属性用于指定子元素在容器内是否换行。默认值为 nowrap，即不换行。

示例代码：

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

在上面的示例中，如果子元素在容器内放不下，就会自动换行。

flex-grow 属性

flex-grow 属性用于指定弹性项目的放大比例。默认值为 0，即不放大。

示例代码：

.flex-item {
  flex-grow: 1;
}

在上面的示例中，.flex-item 会根据剩余空间等比例放大。

flex-shrink 属性

flex-shrink 属性用于指定弹性项目的缩小比例。默认值为 1，即可以缩小。

示例代码：

.flex-item {
  flex-shrink: 0;
}

在上面的示例中，.flex-item 不会随着容器缩小而缩小。

flex-basis 属性

flex-basis 属性用于指定弹性项目在主轴上的初始大小。默认值为 auto，即根据内容自动计算大小。

示例代码：

.flex-item {
  flex-basis: 50%;
}

在上面的示例中，.flex-item 在主轴上的初始大小为容器宽度的 50%。

以上就是 Flexbox 中常用的一些属性，通过灵活运用这些属性，我们可以轻松创建各种复杂的布局。