30分钟Flex布局速成指南，小白也能变高手！

2023-10-04 09:20:32

前言

Flex布局是一种强大的布局工具，可用于创建灵活、响应式且易于维护的布局。它于2009年首次引入CSS3，并已成为Web设计人员和开发人员必备的工具。

本指南将带您逐步了解flex布局的基本知识，并提供一些实用技巧，帮助您将flex布局应用到自己的项目中。我们从flex布局的基础开始，然后深入探讨更高级的概念，如flex容器、flex项目、flex属性等。

1. Flex布局基础

flex布局是一个一维布局系统，这意味着它只能沿一条轴线排列元素。轴线可以是水平的或垂直的，由flex容器的flex-direction属性决定。

flex容器是采用flex布局的元素，它可以是任何HTML元素，如div、section、header等。flex容器的子元素称为flex项目。

2. Flex容器属性

flex容器有几个属性可以控制其布局，包括：

flex-direction：决定轴线的方向，可以是row（水平）或column（垂直）。
flex-wrap：决定是否允许flex项目换行，可以是nowrap（不允许换行）、wrap（允许换行）或wrap-reverse（反向换行）。
flex-flow：是一个简写属性，可以同时设置flex-direction和flex-wrap。
justify-content：控制flex项目在主轴上的对齐方式，可以是flex-start（左对齐）、flex-end（右对齐）、center（居中）、space-between（两端对齐）或space-around（均匀分布）。
align-items：控制flex项目在交叉轴上的对齐方式，可以是flex-start（顶部对齐）、flex-end（底部对齐）、center（居中）、baseline（文本基线对齐）或stretch（拉伸）。
align-content：控制flex项目在交叉轴上的分布方式，可以是flex-start（顶部对齐）、flex-end（底部对齐）、center（居中）、space-between（两端对齐）或space-around（均匀分布）。

3. Flex项目属性

flex项目也有几个属性可以控制其布局，包括：

order：决定flex项目的排列顺序，可以是整数。
flex-grow：控制flex项目在主轴上增长的比例，可以是整数或小数。
flex-shrink：控制flex项目在主轴上收缩的比例，可以是整数或小数。
flex-basis：控制flex项目的初始大小，可以是像素值、百分比或auto。
align-self：控制flex项目在交叉轴上的对齐方式，可以是auto（跟随flex容器的align-items属性）、flex-start（顶部对齐）、flex-end（底部对齐）、center（居中）或baseline（文本基线对齐）。

4. 实用技巧

以下是一些将flex布局应用到项目中的实用技巧：