跳到主要内容

Flexbox概述

一、Flexbox 简介

1. 什么是 Flexbox?

  • Flexbox 是 CSS3 引入的一种新的布局方式
  • 全称为 Flexible Box Layout Module
  • 专门用于创建更加灵活和响应式的页面布局

2. 为什么使用 Flexbox?

  • 简化复杂布局的实现
  • 轻松实现垂直居中
  • 自适应容器大小
  • 改变元素显示顺序
  • 空间自动分配和对齐

二、Flexbox 基本概念

1. 容器和项目

  • Flex 容器:设置 display: flex 的元素
  • Flex 项目:Flex 容器的直接子元素

2. 主轴和交叉轴

  • 主轴:由 flex-direction 属性确定的方向
  • 交叉轴:垂直于主轴的方向

3. 基本属性d

容器属性:

.flex-container {
display: flex; /* 或 inline-flex */
flex-direction: row; /* 主轴方向 */
flex-wrap: nowrap; /* 是否换行 */
justify-content: center; /* 主轴对齐方式 */
align-items: center; /* 交叉轴对齐方式 */
align-content: stretch; /* 多行对齐方式 */
}
  • align-items 的设置对象是行内成员;
  • align-content 的设置对象是所有行,且只有在多行弹性盒子容器中才生效。

项目属性:

.flex-item {
order: 0; /* 排序 */
flex-grow: 0; /* 放大比例 */
flex-shrink: 1; /* 缩小比例 */
flex-basis: auto; /* 初始大小 */
align-self: auto; /* 单个项目对齐方式 */
}

示例代码

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox 概述示例</title>
<style>
.container {
max-width: 800px;
margin: 20px auto;
font-family: Arial, sans-serif;
}

/* 基础 Flex 容器 */
.flex-container {
display: flex;
background-color: #f0f0f0;
padding: 10px;
margin-bottom: 20px;
border: 2px solid #333;
}

/* Flex 项目 */
.flex-item {
background-color: #007BFF;
color: white;
padding: 20px;
margin: 5px;
text-align: center;
}

/* 不同主轴方向 */
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.flex-row-reverse { flex-direction: row-reverse; }

/* 不同对齐方式 */
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.align-center { align-items: center; }

/* 换行示例 */
.flex-wrap {
flex-wrap: wrap;
}

/* 不同尺寸的项目 */
.flex-item-large {
flex-grow: 2;
}
</style>
</head>
<body>
<div class="container">
<h1>Flexbox 布局示例</h1>

<h2>基础 Flex 容器</h2>
<div class="flex-container">
<div class="flex-item">项目 1</div>
<div class="flex-item">项目 2</div>
<div class="flex-item">项目 3</div>
</div>

<h2>列方向排列</h2>
<div class="flex-container flex-column">
<div class="flex-item">项目 1</div>
<div class="flex-item">项目 2</div>
<div class="flex-item">项目 3</div>
</div>

<h2>居中对齐</h2>
<div class="flex-container justify-center align-center" style="height: 200px;">
<div class="flex-item">居中项目</div>
</div>

<h2>空间分布</h2>
<div class="flex-container justify-between">
<div class="flex-item">项目 1</div>
<div class="flex-item">项目 2</div>
<div class="flex-item">项目 3</div>
</div>

<h2>自动换行</h2>
<div class="flex-container flex-wrap">
<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>

<h2>不同大小的项目</h2>
<div class="flex-container">
<div class="flex-item">普通项目</div>
<div class="flex-item flex-item-large">放大的项目</div>
<div class="flex-item">普通项目</div>
</div>
</div>
</body>
</html>

注意事项

  1. Flexbox 主要用于一维布局(行或列)
  2. 注意浏览器兼容性
  3. 合理使用主轴和交叉轴的对齐方式
  4. 理解 flex-grow 和 flex-shrink 的作用

实践建议

  1. 从简单的布局开始练习
  2. 使用浏览器开发者工具观察 Flex 布局
  3. 尝试不同的属性组合
  4. 注意响应式设计的实现