上查看所有课程
Flex 元素是 flex 容器的直接子元素。
在下面的图表中，紫色容器是 flex 容器，包含三个用橙色框表示的 flex 元素。
Flex 元素根据 flex 容器的属性进行排列和对齐。
以下属性可用于调整 flex 容器内的单个 flex 元素。
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
我们将逐一介绍以上每个属性。
CSS Order 属性
默认情况下，flex 元素按照它们在 HTML 文档中出现的顺序排列。我们可以使用 order 属性来指定 flex 容器中 flex 元素的顺序。
order 属性的默认值为 0。
让我们看一个例子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS order</title>
</head>
<body>
<h2>Order Property</h2>
<div class="container">
<div class="box box1">1 <br />order: 3;</div>
<div class="box box2">2 <br />order: 1;</div>
<div class="box box3">3 <br />order: 2;</div>
</div>
</body>
</html>div.container {
display: flex;
flex-direction: row;
background-color: purple;
}
div.box {
width: 80px;
height: 40px;
text-align: center;
background-color: orange;
margin: 8px;
}
/* displays the box third in order */
div.box1 {
order: 3;
}
/* displays the box first in order */
div.box2 {
order: 1;
}
/* displays the box second in order */
div.box3 {
order: 2;
}浏览器输出
在上面的示例中，order 值较低的 flex 元素会先放置。
注意：order 属性可以接受正数或负数，值越小，flex 元素在容器中的位置越靠前。
正的大值会将元素放置在更靠右的位置，而负的小值会将元素放置在更靠左的位置。
CSS Flex-Grow 属性
flex-grow 属性决定了 flex 元素相对于 flex 容器中其他元素的增长比例。flex-grow 属性接受一个无单位数字，表示容器中剩余空间的比例。
flex-grow 的默认值为 0，表示 flex 元素默认不增长。
让我们看一个例子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS flex-grow</title>
</head>
<body>
<h2>flex-grow: 0 (default value)</h2>
<!-- container without flex-grow -->
<div class="container container1">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>
<h2>flex-grow: 1</h2>
<!-- container with flex-grow -->
<div class="container container2">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>
</body>
</html>/* styles for both containers */
div.container {
display: flex;
flex-direction: row;
background-color: purple;
}
/* styles for flex items of both containers */
div.box {
width: 80px;
height: 40px;
text-align: center;
background-color: orange;
margin: 8px;
}
/* styles for second container */
div.container2 div.box {
flex-grow: 1;
}浏览器输出
在上面的例子中：
flex-grow: 1
使 flex 元素按比例增长，占据第二个 flex 容器内的可用空间。
我们也可以为单个 flex 元素设置 flex-grow 属性。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS flex-grow</title>
</head>
<body>
<div class="container">
<div class="box box1">1</div>
<div class="box box2">2 <br />flex-grow: 2;</div>
<div class="box box3">3</div>
<div class="box box4">4 <br />flex-grow: 1;</div>
<div class="box box5">5</div>
</div>
</body>
</html>/* styles for flex container */
div.container {
display: flex;
flex-direction: row;
background-color: purple;
}
/* style for flex items */
div.box {
width: 40px;
height: 40px;
text-align: center;
background-color: orange;
margin: 8px;
}
div.box2 {
flex-grow: 2;
}
div.box4 {
flex-grow: 1;
}浏览器输出
在这里，flex-grow 的值决定了 flex 元素之间如何增长。
当 flex 容器中有额外空间时，flex-grow: 2 使一个 flex 元素的增长量是 flex-grow: 1 元素的两倍。
CSS Flex-Shrink 属性
flex-shrink 属性决定了当 flex 容器空间不足时，flex 元素相对于其他元素的收缩比例。
flex-shrink 值表示收缩 flex 元素的比例因子。值越大，flex 元素的收缩速度越快。
flex-shrink 的默认值为 1，表示 flex 元素会平均收缩以适应可用空间。
让我们看一个例子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS flex-shrink</title>
</head>
<body>
<h2>flex-shrink: 1 (default value) for all flex items</h2>
<div class="container container1">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
<div class="box box5">5</div>
<div class="box box6">6</div>
</div>
<h2>flex-shrink: 2 on the third item</h2>
<div class="container container2">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
<div class="box box5">5</div>
<div class="box box6">6</div>
</div>
</body>
</html>/* styles for flex container */
div.container {
display: flex;
flex-direction: row;
background-color: purple;
}
/* style for flex items */
div.box {
width: 200px;
height: 40px;
text-align: center;
background-color: orange;
margin: 8px;
}
/* styles the third flex item of the second container */
div.container2 div.box3 {
flex-shrink: 2;
}浏览器输出
在上面的示例中，所有 flex 元素的初始 width 都是 200px。由于容器没有可用空间，所有 flex 元素都会按比例收缩。
然而，在第二个容器中，使用 flex-shrink: 2 导致第三个 flex 元素比其他元素收缩得更多，因为没有足够的空间来容纳所有元素在其自然大小。
注意：flex-shrink 属性仅在 flex 元素的总尺寸超过 flex 容器尺寸时生效。
CSS Flex-Basis 属性
flex-basis 属性定义了 flex 元素在任何换行、增长或收缩发生之前的初始尺寸。它是 flex 元素 width 和 height 的替代属性。
默认情况下，flex-basis 属性设置为 auto，它使用为该元素指定的 width/height 属性值作为尺寸。
让我们看一个例子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS flex-basis</title>
</head>
<body>
<h2>flex-basis: auto (default value for all flex items)</h2>
<div class="container container1">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
<div class="box box5">5</div>
</div>
<h2>flex-basis: 200px on the fourth item</h2>
<div class="container container2">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
<div class="box box5">5</div>
</div>
</body>
</html>/* styles for flex container */
div.container {
display: flex;
flex-direction: row;
background-color: purple;
}
/* style for flex items */
div.box {
width: 40px;
height: 40px;
text-align: center;
background-color: orange;
margin: 8px;
}
/* styles the fourth flex item of the second container */
div.container2 div.box4 {
flex-basis: 200px;
}浏览器输出
在这里，flex-basis: 200px 在第二个 flex 容器中将第四个 flex 元素的长度设置为 200 像素。
简写 Flex 属性
flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。例如，
/* flex-grow: 0, flex-shrink: 1, flex-basis: auto (default values)*/
flex: 0 1 auto;
/* flex-grow: 1, flex-shrink: 1, flex-basis: 200px */
flex: 1 1 200px;flex 属性的第二个和第三个值是可选的。
让我们看一个例子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS flex Pvroperty</title>
</head>
<body>
<h2>flex: 0 1 80px (flex-grow, flex-shrink, flex-basis)</h2>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>
</body>
</html>/* styles for flex container */
div.container {
display: flex;
flex-direction: row;
background-color: purple;
}
/* style for flex items */
div.box {
/*flex-grow, flex-shrink, flex-basis */
flex: 0 1 80px;
height: 40px;
text-align: center;
background-color: orange;
margin: 8px;
}浏览器输出
在上面的示例中，flex: 0 1 80px 分别将 flex-grow 设置为 0，flex-shrink 设置为 1，flex-basis 设置为 80px。
注意：建议使用简写的 flex 属性而不是单独的属性，因为它能使
CSS 代码更整洁、更简洁。
CSS Align-Self 属性
align-self 属性用于控制 flex 容器中单个 flex 元素的对齐方式。它允许我们覆盖 align-items 属性在单个 flex 元素上设置的默认对齐方式。
align-self 属性的可能值是 flex-start、flex-end、center、baseline 和 stretch（默认值）。
让我们看一个例子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS align-self</title>
</head>
<body>
<div class="container">
<div class="box box1">1<br />flex-start</div>
<div class="box box2">2 <br />center</div>
<div class="box box3">3 <br />flex-end</div>
<div class="box box4">4 <br />stretch</div>
</div>
</body>
</html>/* styles for flex container */
div.container {
height: 180px;
display: flex;
flex-direction: row;
background-color: purple;
}
/* style for flex items */
div.box {
width: 80px;
text-align: center;
background-color: orange;
margin: 8px;
}
div.box1 {
align-self: flex-start;
}
div.box2 {
align-self: center;
}
div.box3 {
align-self: flex-end;
}
div.box4 {
align-self: stretch;
}浏览器输出
