菜鸟教程
教程 css tutorial

项目属性

Flex 容器内的直接子元素称为弹性项目，常用项目属性包括：

1. flex-grow

定义项目的放大比例，默认为 0，不放大。

css 
flex-grow: 1;

数值越大，剩余空间分配越多。

2. flex-shrink

定义项目的缩小比例，默认为 1，允许缩小。

css 
flex-shrink: 1;

当空间不足时，数值越大，缩小越多。

3. flex-basis

定义项目在主轴上的初始大小，默认 auto，即项目本来大小。

css 
flex-basis: 100px;

可以设定固定尺寸或百分比。

4. flex

简写属性，结合 flex-grow、flex-shrink 和 flex-basis。

css 
flex: 1 1 100px;

5. order

控制项目的排列顺序，数字越小越靠前，默认 0。

css 
order: 2;

6. align-self

覆盖容器的 align-items，设置单个项目在交叉轴上的对齐方式。

可选值：auto、flex-start、flex-end、center、baseline、stretch。

css 
align-self: center;

Flex 项目属性示例

在线代码演示
源码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
<meta charset="UTF-8" />
<title>Flex 项目属性示例</title>
<style>
.flex-container {
display: flex;
height: 150px;
background-color: #e1bee7;
border: 2px solid #9c27b0;
padding: 10px;
gap: 10px;
align-items: flex-start;
}


.flex-item {
  background-color: #ba68c8;
  color: white;
  padding: 15px;
  font-weight: bold;
  border-radius: 6px;
  text-align: center;
  min-width: 60px;
}

.grow {
  flex-grow: 2;
}

.shrink {
  flex-shrink: 1;
  width: 150px;
  background-color: #ce93d8;
}

.basis {
  flex-basis: 120px;
  background-color: #ab47bc;
}

.order {
  order: -1;
  background-color: #8e24aa;
}

.align-self {
  align-self: flex-end;
  background-color: #6a1b9a;
}



</style>
</head>


<body>
<div class="flex-container">
<div class="flex-item">默认</div>
<div class="flex-item grow">flex-grow: 2</div>
<div class="flex-item shrink">flex-shrink: 1</div>
<div class="flex-item basis">flex-basis: 120px</div>
<div class="flex-item order">order: -1</div>
<div class="flex-item align-self">align-self: flex-end</div>
</div>
</body>


</html>

相关内容