前端必知必会-CSS Flex Items属性

---

CSS Flex Items

子元素（Items）

弹性容器的直接子元素自动变为弹性（flex）items。

上面的元素表示灰色弹性容器内的四个蓝色Flex Items。

示例

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

Flex Items属性为：

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

order 属性

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

代码中的第一个弹性项目不必作为布局中的第一个项目出现。

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

示例
order 属性可以更改弹性项目的顺序：

<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 属性指定弹性项目相对于其余弹性项目的增长量。

该值必须是数字，默认值为 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。

示例
不要让第三个弹性项目像其他弹性项目一样收缩：

<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 属性指定弹性项目的初始长度。

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

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

flex 属性

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

示例
使第三个弹性项目不可增长 (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-self 属性会覆盖容器的 align-items 属性设置的默认对齐方式。

在这些示例中，我们使用 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 Items属性

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

属性	描述
align-self	指定弹性项目的对齐方式（覆盖弹性容器的 align-items 属性）
flex	弹性项目增长、弹性项目收缩和弹性项目基础属性的简写
flex-basis	指定弹性项目的初始长度
flex-grow	指定弹性项目相对于同一容器内其余弹性项目的增大程度
flex-shrink	指定弹性项目相对于同一容器内其余弹性项目的收缩程度
order	指定同一容器内弹性项目的顺序

---

总结

本文介绍了CSS Flex Items属性的使用，如有问题欢迎私信和评论