白骑士的CSS教学语法基础篇之布局 2.5.3 Flexbox布局

系列目录​​​​​​​

上一篇：白骑士的CSS教学语法基础篇之布局 2.5.2 定位布局

        Flexbox 布局是 CSS3 中引入的一种强大的布局模型，它旨在简化在复杂布局中对元素的对齐和分布。Flexbox 布局为网页设计提供了更加灵活和高效的布局方式，特别是在处理动态和不确定尺寸的内容时。Flexbox 布局包括两个主要部分：容器（Flex Container）和项目（Flex Items）。了解这两个部分及其相关属性，将帮助你在实际开发中更好地利用 Flexbox 布局。

Flexbox的基本概念

        Flexbox 布局的核心思想是将容器中的子元素（项目）安排成一行或一列，并在主轴和交叉轴上控制它们的对齐和分布。Flexbox 提供了一种更为简便的方式来处理传统布局模型（如浮动和定位）中遇到的各种问题。

主轴和交叉轴

• 主轴：这是 Flexbox 布局的主要轴线，项目在主轴上的排列方向。可以是水平（默认）或垂直。
• 交叉轴：与主轴垂直的轴线，控制项目在交叉轴上的对齐方式。

Flex容器与项目

• Flex容器（Flex Container）：应用了 Flexbox 布局的父元素。
• Flex项目（Flex Items）：作为 Flex 容器的直接子元素，它们在容器内进行布局。

Flex容器属性

‘display: flex;‘

        这个属性将容器设置为 Flex 容器，使其子元素变为 Flex 项目。

        示例：

.container {
  display: flex;
}

‘flex-direction‘

 &n