CSS Flex布局如何深入理解详解？

本文共计3110个文字，预计阅读时间需要13分钟。

目录 + Flex 是什么 + 容器的属性 + item 的属性 + 一些疑问和解答

Flex 是什么 + Flexbox 模块提供了有效的布局方式，无需知道视窗大小或元素情况，即可实现灵活布局。

容器属性 + 容器可以通过设置 `display: flex;` 来启用 Flexbox 布局。

item 属性 + Flexbox 中的每个元素都可以通过设置 `flex` 属性来控制其大小和布局。

疑问和解答 + Flexbox 是什么 + 根据规范中的描述，Flexbox 提供了一种有效的布局方式，无需预先知道视窗大小或元素情况。

目录

• flex是什么
• 容器的属性
• item 的属性
• 一些疑惑和解答

flex是什么

根据规范中的描述可知道，Flexbox 模块提供了一个有效的布局方式，即使不知道视窗大小或者未知元素情况之下都可以智能的，灵活的调整和分配元素和空间两者之关的关系。简单的理解，就是可以自动调整，计算元素在容器空间中的大小。

flex分为两个部分，即容器(Container)和项目(item)。一旦将一个元素设置为 flex container，那么其子元素默认全部变为flex item。然后我们就可以通过在 container 设置一些属性来控制其 item 的布局。当然，item 自身也有一些 flex 属性，是只针对自己的属性。