菜鸟教程
教程 css tutorial

Flex 容器与项目

Flexbox（弹性盒子）是一种一维布局模型，能够轻松实现元素的对齐、分布和顺序控制。

1. Flex 容器

通过给父元素设置 display: flex; 或 display: inline-flex;，将其变为弹性容器。

css 
display: flex;

常用容器属性

  • flex-direction: 定义主轴方向（row、column、row-reverse、column-reverse）。
  • justify-content: 沿主轴对齐方式（flex-start、center、space-between 等）。
  • align-items: 沿侧轴对齐方式（flex-start、center、stretch 等）。
  • flex-wrap: 是否换行（nowrap、wrap、wrap-reverse）。

2. Flex 项目

弹性容器内的直接子元素称为弹性项目，可以单独设置：

  • flex-grow: 放大比例，默认 0。
  • flex-shrink: 缩小比例，默认 1。
  • flex-basis: 初始大小，默认 auto。
  • order: 控制显示顺序，默认 0。
  • align-self: 单个项目的侧轴对齐方式，覆盖容器的 align-items。

Flex 容器与项目示例

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

<head>
<meta charset="UTF-8" />
<title>Flex 容器与项目示例</title>
<style>
.flex-container {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
height: 150px;
background-color: #bbdefb;
border: 2px solid #1976d2;
margin-bottom: 20px;
}


.flex-item {
  background-color: #42a5f5;
  color: white;
  padding: 20px;
  font-weight: bold;
  border-radius: 5px;
}

.flex-item.grow {
  flex-grow: 2;
}

.flex-item.shrink {
  flex-shrink: 1;
  width: 200px;
  background-color: #4db6ac;
}

.flex-item.order {
  order: -1;
  background-color: #f48fb1;
}

.flex-item.align-self {
  align-self: flex-end;
  background-color: #ffb74d;
}



</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 order">order: -1</div>
<div class="flex-item align-self">align-self: flex-end</div>
</div>
</body>


</html>

相关内容