菜鸟教程
教程 css tutorial

容器属性

设置 display: flex 或 inline-flex 后，父元素成为弹性容器，常用容器属性包括：

1. flex-direction

定义主轴方向，决定子元素排列方向。

  • row（默认）：主轴为水平方向，项目从左到右排列。
  • row-reverse：主轴为水平方向，项目从右到左排列。
  • column：主轴为垂直方向，项目从上到下排列。
  • column-reverse：主轴为垂直方向，项目从下到上排列。
css 
flex-direction: row;

2. flex-wrap

定义是否换行。

  • nowrap（默认）：不换行，所有项目在一行内。
  • wrap：换行，项目溢出时换到下一行。
  • wrap-reverse：换行，但换行方向相反。
css 
flex-wrap: wrap;

3. justify-content

定义主轴（水平）上的对齐方式。

  • flex-start（默认）：左对齐。
  • flex-end：右对齐。
  • center：居中对齐。
  • space-between：两端对齐，项目之间间距相等。
  • space-around：项目两侧间距相等。
css 
justify-content: space-between;

4. align-items

定义交叉轴（垂直）上的对齐方式。

  • stretch（默认）：拉伸填满容器高度。
  • flex-start：顶部对齐。
  • flex-end：底部对齐。
  • center：居中对齐。
  • baseline：项目文字基线对齐。
css 
align-items: center;

5. align-content

多行时，定义交叉轴的对齐方式。仅当有多行换行时生效。

  • stretch（默认）：拉伸填满。
  • flex-start：顶部对齐。
  • flex-end：底部对齐。
  • center：居中对齐。
  • space-between：两端对齐。
  • space-around：间距均匀。
css 
align-content: flex-start;

Flex 容器属性示例

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

<head>
<meta charset="UTF-8" />
<title>Flex 容器属性示例</title>
<style>
.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
align-content: space-between;
height: 250px;
background-color: #e3f2fd;
border: 2px solid #2196f3;
padding: 10px;
gap: 10px;
}


.flex-item {
  background-color: #64b5f6;
  color: white;
  padding: 15px;
  font-weight: bold;
  border-radius: 6px;
  width: 100px;
  text-align: center;
  flex-shrink: 0;
}



</style>
</head>


<body>
<div class="flex-container">
<div class="flex-item">项目 1</div>
<div class="flex-item">项目 2</div>
<div class="flex-item">项目 3</div>
<div class="flex-item">项目 4</div>
<div class="flex-item">项目 5</div>
<div class="flex-item">项目 6</div>
</div>
</body>


</html>

相关内容