Flex布局：核心概念与实战技巧

一、Flex布局的基本定义与核心概念

Flex布局（弹性盒子布局）是CSS3中引入的一种布局模式，旨在为盒状模型提供最大的灵活性，尤其适用于响应式设计。通过设置容器的display属性为flex或inline-flex，其直接子元素自动成为Flex项目（Flex Item），并按照弹性布局规则排列。

• 核心特点：
  • 简化布局代码：Flex布局通过简单的属性设置即可实现复杂的布局效果（如水平/垂直居中、等高等），减少传统布局方式（如float、position）的代码量。
  • 灵活性高：支持动态调整项目的大小、顺序和对齐方式，适应不同屏幕尺寸。
  • 响应式友好：通过属性组合，可轻松实现页面元素在不同设备上的自适应排列。

二、Flex容器与Flex项目的区别

1. Flex容器（Flex Container）

• 定义：通过设置display: flex（块级弹性容器）或display: inline-flex（行内弹性容器）的元素。
• 作用：控制所有子项目（Flex项目）的排列规则，包括主轴方向、换行方式、对齐方式等。
• 属性（作用于容器）：
  • flex-direction：定义主轴方向（row/row-reverse/column/column-reverse），默认水平方向（row）。
  • flex-wrap：控制项目是否换行（nowrap/wrap/wrap-reverse），默认不换行。
  • justify-content：主轴对齐方式（如flex-start/center/space-between）。
  • align-items：交叉轴单行对齐方式（如stretch/center）。
  • align-content：交叉轴多行对齐方式（如space-around/stretch），仅在多行布局时生效。
• 注意点