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

目录

CSS 弹性项目

❮ 上一节 下一节 ❯

子元素（项目）

Flex 容器的直接子元素自动成为弹性 (flex) 项目。

1

2

3

4

上面的元素代表灰色弹性容器内的四个蓝色弹性项目。

示例

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

亲自试一试 »

弹性项目属性是：

订单属性

这个order属性指定弹性项目的顺序。

1

2

3

4

代码中的第一个 Flex 项目不必显示为布局中的第一个项目。

订单值必须是数字，默认值为 0。

示例

这个命令属性可以改变弹性项目的顺序：

<div class="flex-container">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div>
  <div style="order: 1">4</div>
</div>

亲自试一试 »

flex-grow 属性

这个flex-grow属性指定弹性项目相对于其余弹性项目的增长量。

1

2

3

该值必须是数字，默认值为 0。

示例

使第三个弹性项目的增长速度比其他弹性项目快八倍：

<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 8">3</div>
</div>

亲自试一试 »

flex-shrink 属性

这个flex-shrink属性指定弹性项目相对于其余弹性项目收缩的程度。

1

2

3

4

5

6

7

8

9

10

该值必须是数字，默认值为 1。

示例

不要让第三个 Flex 项目像其他 Flex 项目一样收缩：

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 0">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

亲自试一试 »

flex-basis 属性

这个flex-basis属性指定弹性项目的初始长度。

1

2

3

4

示例

将第三个 Flex 项目的初始长度设置为 200 像素：

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis: 200px">3</div>
  <div>4</div>
</div>

亲自试一试 »

弹性属性

这个flexproperty 是属性的简写 flex-grow,flex-shrink， 和flex-basis特性。

示例

使第三个 Flex 项目不可增长 (0)、不可收缩 (0)，且初始长度为 200 像素：

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex: 0 0 200px">3</div>
  <div>4</div>
</div>

亲自试一试 »

自我对齐属性

这个align-self属性指定灵活容器内所选项目的对齐方式。

这个align-self 属性会覆盖容器设置的默认对齐方式align-items属性。

1

2

3

4

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

示例

将第三个 Flex 项目对齐在容器的中间：

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="align-self: center">3</div>
  <div>4</div>
</div>

亲自试一试 »

示例

将第二个 Flex 项目与容器顶部对齐，将第三个 Flex 项目与容器底部对齐：

<div class="flex-container">
  <div>1</div>
  <div style="align-self: flex-start">2</div>
  <div style="align-self: flex-end">3</div>
  <div>4</div>
</div>

亲自试一试 »

CSS Flexbox 项目属性

下表列出了所有 CSS Flexbox 项目属性：

Property Description
align-self Specifies the alignment for a flex item (overrides the flex container's align-items property)
flex A shorthand property for the flex-grow, flex-shrink, and the flex-basis properties
flex-basis Specifies the initial length of a flex item
flex-grow Specifies how much a flex item will grow relative to the rest of the flex items inside the same container
flex-shrink Specifies how much a flex item will shrink relative to the rest of the flex items inside the same container
order Specifies the order of the flex items inside the same container

❮ 上一节 下一节 ❯