深入理解CSS弹性盒子模型（Flexbox）

“时间突然向前迈了一大步，我奋力追赶，却遥不可及。”

---

前言

写在开始：

在现代网页布局中，CSS弹性盒子模型（Flexbox）无疑是一个强大且灵活的工具。它简化了复杂布局的实现，尤其是在响应式设计中表现尤为出色。本文将详细介绍Flexbox的基本概念、核心属性以及如何在实际项目中应用Flexbox,一起来学习吧

---

文章有误敬请斧正 不胜感恩！

以下是本篇文章正文内容，

---

什么是Flexbox？

Flexbox，全称为Flexible Box Layout Module，是CSS3引入的一种布局模式。它旨在为容器中的项目提供更加灵活和高效的布局方式，能够轻松地在不同屏幕尺寸和设备上实现自适应布局。与传统的布局方式（如浮动布局和定位布局）相比，Flexbox更加直观且易于控制元素的对齐、方向和顺序。

Flex容器与Flex项目

Flexbox的核心概念包括Flex容器和Flex项目：

• Flex容器（Flex Container）：使用display: flex或display: inline-flex声明的元素，成为Flex容器。它的子元素自动成为Flex项目。

• Flex项目（Flex Items）：Flex容器内的直接子元素，即Flex项目，可以通过各种Flexbox属性进行布局和对齐。

例子：

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

.flex-container {
   
  display: flex;
}

在上面的例子中，.flex-container是Flex容器，里面的三个.flex-item是Flex项目。

主轴与交叉轴

Flexbox的布局基于两个主要概念：主轴（Main Axis）和交叉轴（Cross Axis）。

• 主轴：默认情况下，主轴是水平方向（从左到右）。Flex项目会沿主轴排列。

• 交叉轴：与主轴垂直的方向，默认是垂直方向（从上到下）。

通过改变flex-direction属性，可以调整主轴的方向，从而改变交叉轴的方向。

Flex容器的主要属性

Flex容器拥有多个属性，用于控制Flex项目的排列和对齐。以下是一些核心属性及其详细解释：

1. display

• 用法：display: flex; 或 display: inline-flex;

• 说明：声明一个元素为Flex容器。flex使元素成为块级Flex容器，而inline-flex则为内联Flex容器。

2. flex-direction

• 用法：flex-direction: row | row-reverse | column | column-reverse;

• 说明：定义主轴的方向，即Flex项目的排列方向。

  • row（默认）：水平从左到右排列。
  • row-reverse：水平从右到左排列。
  • column：垂直从上到下排列。
  • column-reverse：垂直从下到上排列。

3. justify-content

• 用法：justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;

• 说明：定义Flex项目在主轴上的对齐方式。

  • flex-start（默认）：项目向主轴的起点对齐。
  • flex-end：项目向主轴的终点对齐。
  • center：项目在主轴上居中对齐。
  • space-between：项目在主轴上平均分布，首尾项目对齐容器边缘。
  • space-around：项目在主轴上平均分布，每个项目两侧的间隔相等。
  • space-evenly：项目在主轴上均匀分布，间隔相等。

4. align-items

• 用法：align-items: flex-start | flex-end | center | baseline | stretch;

• 说明：定义Flex项目在交叉轴上的对齐方式。

  • stretch（默认）：项目在交叉轴上拉伸以填满容器。
  • flex-start：项目在交叉轴的起点对齐。
  • flex-end：项目在交叉轴的终点对齐。
  • center：项目在交叉轴上居中对齐。
  • baseline：项目沿着基线对齐。

5. flex-wrap