码农教程 - 一技在手,衣食无忧! tools

目录

CSS 弹性容器

❮ 上一节 下一节 ❯

父元素（容器）

就像我们在上一章中指定的那样，这是一个 Flex容器（蓝色区域）具有三个弹性项目：

1

2

3

通过设置 Flex 容器变得灵活display属性为flex：

示例

.flex-container {
  display: flex;
}

亲自试一试 »

Flex 容器属性为：

flex-direction 属性

这个flex-direction属性定义容器想要堆叠弹性项目的方向。

1

2

3

示例

这个columnvalue 垂直堆叠弹性项目（从上到下）：

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

亲自试一试 »

示例

这个column-reversevalue 垂直堆叠弹性项目（但从下到上）：

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

亲自试一试 »

示例

这个rowvalue 水平堆叠弹性项目（从左到右）：

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

亲自试一试 »

示例

这个row-reversevalue 水平堆叠弹性项目（但从右到左）：

.flex-container {
  display: flex;
  flex-direction: row-reverse;
}

亲自试一试 »

flex-wrap 属性

这个flex-wrap属性指定弹性项目是否应该换行。

下面的示例有 12 个弹性项目，以更好地演示 flex-wrap属性。

1

2

3

4

5

6

7

8

9

10

11

12

示例

这个wrapvalue 指定弹性项目将在必要时换行：

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

亲自试一试 »

示例

这个nowrapvalue 指定弹性项目不会换行（这是默认值）：

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

亲自试一试 »

示例

这个wrap-reversevalue 指定灵活项目将在必要时按相反顺序换行：

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

亲自试一试 »

flex-flow 属性

这个flex-flowproperty 是一个简写属性，用于设置 flex-direction和flex-wrap特性。

示例

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

亲自试一试 »

justify-content 属性

这个justify-content属性用于对齐弹性项目：

1

2

3

示例

这个centervalue 将弹性项目对齐到容器的中心：

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

亲自试一试 »

示例

这个flex-startvalue 将弹性项目对齐在容器的开头（这是默认值）：

.flex-container {
  display: flex;
  justify-content: flex-start;
}

亲自试一试 »

示例

这个flex-endvalue 将弹性项目对齐到容器的末尾：

.flex-container {
  display: flex;
  justify-content: flex-end;
}

亲自试一试 »

示例

这个space-aroundvalue 显示 Flex 项目，并在行前、行间和行后留出空间：

.flex-container {
  display: flex;
  justify-content: space-around;
}

亲自试一试 »

示例

这个space-betweenvalue 显示弹性项目，行之间有空格：

.flex-container {
  display: flex;
  justify-content: space-between;
}

亲自试一试 »

对齐项目属性

这个align-items属性用于对齐弹性项目。

1

2

3

在这些示例中，我们使用 200 像素高的容器，以更好地演示 align-items属性。

示例

这个centervalue 将弹性项目对齐在容器的中间：

.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
}

亲自试一试 »

示例

这个flex-startvalue 将弹性项目对齐在容器的顶部：

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-start;
}

亲自试一试 »

示例

这个flex-endvalue 对齐容器底部的弹性项目：

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-end;
}

亲自试一试 »

示例

这个stretchvalue 拉伸弹性项目以填充容器（这是默认值）：

.flex-container {
  display: flex;
  height: 200px;
  align-items: stretch;
}

亲自试一试 »

示例

这个baselinevalue 对齐弹性项目，例如它们的基线对齐：

.flex-container {
  display: flex;
  height: 200px;
  align-items: baseline;
}

笔记：该示例使用不同的字体大小来演示项目按文本基线对齐：

1

2

3

4

亲自试一试 »

对齐内容属性

这个align-content属性用于对齐弹性线。

1

2

3

4

5

6

7

8

9

10

11

12

在这些示例中，我们使用 600 像素高的容器，其中 flex-wrap属性设置为wrap，为了更好地展示align-content属性。

示例

这个space-betweenvalue 显示弯曲线之间的间距相等：

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-between;
}

亲自试一试 »

示例

这个space-aroundvalue 显示弯曲线，并在其之前、之间和之后留有空间：

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-around;
}

亲自试一试 »

示例

这个stretchvalue 拉伸伸缩线以占据剩余空间（这是默认值）：

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: stretch;
}

亲自试一试 »

示例

这个centervalue 显示容器中间的伸缩线：

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: center;
}

亲自试一试 »

示例

这个flex-startvalue 显示容器开头的伸缩线：

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-start;
}

亲自试一试 »

示例

这个flex-endvalue 显示容器末尾的伸缩线：

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-end;
}

亲自试一试 »

完美居中

在下面的示例中，我们将解决一个非常常见的样式问题：完美居中。

解决方案：设置两个justify-content和align-items属性到center，并且弹性项目将完全居中：

示例

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

亲自试一试 »

CSS Flexbox 容器属性

下表列出了所有 CSS Flexbox 容器属性：

Property Description
align-content Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines
align-items Vertically aligns the flex items when the items do not use all available space on the cross-axis
display Specifies the type of box used for an HTML element
flex-direction Specifies the direction of the flexible items inside a flex container
flex-flow A shorthand property for flex-direction and flex-wrap
flex-wrap Specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line
justify-content Horizontally aligns the flex items when the items do not use all available space on the main-axis

❮ 上一节 下一节 ❯