CSS flex 属性

CSS Flex 属性

简介

CSS Flex 是一组新的布局属性，能够让容器的子元素在可用空间内更加自由地分布，并允许更好的响应式设计。使用 Flex 属性，设计者能够更好地控制元素的尺寸、位置、间隔和排序。

Flex 容器

要使用 Flex 属性，需要先将 Flex 属性应用于容器。使用 Flex 容器，需要设置以下属性：

  1. display: flex: 将容器设为 Flex 布局。
  2. flex-direction: row/column: 设置容器主轴的方向。
  3. justify-content: flex-start/end/center/space-between/space-around: 定义在容器中的子元素沿着主轴的对齐方式。
  4. align-items: flex-start/end/center/baseline/stretch: 定义在容器中的子元素沿着副轴的对齐方式。
  5. align-content: flex-start/end/center/space-between/space-around/stretch: 定义当多个行或列同时存在的情况下，沿着副轴的堆叠方式。

Flex 元素

在 Flex 容器中的元素被称为 Flex 元素，这些元素可以设置以下属性：

  1. order: 定义元素排列的顺序。数值越小，越靠前。默认值为 0.
  2. flex-grow: 定义元素在剩余空间中的拉伸程度。默认值为 0.
  3. flex-shrink: 定义元素在空间不足时的收缩程度。默认值为 1.
  4. flex-basis: 定义元素在分配容器空间之前分配的空间。默认值为 auto.
  5. flex: 等同于 flex-grow、flex-shrink 和 flex-basis 这三个属性的值。默认值为 0 1 auto.
  6. align-self: 允许单个元素与其他元素不一样的对齐方式。默认值为 auto.

示例

以下是一个在 Flex 容器中使用的示例：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.item {
  flex: 1;
}

在以上的示例中，容器沿着主轴的方向是水平的，子元素之间的间隔是采用了 space-between 的方式进行排列的。每个子元素都采用了 flex: 1 的属性，因此它们将在剩余的空间中均分。同时，在副轴方向，子元素的对齐方式是居中的。

CSS empty-cells 属性 CSS flex-basis 属性