本文为寒假学习笔记，整理于草稿箱。

本篇将深入探讨CSS中的flex布局，针对父项与子项的属性与功能进行解析。

首先，介绍flex布局的基本操作方式。一种是通过命名指定元素，另一种则是无需命名。

采用Flex布局的元素被称为Flex容器，其子元素称为Flex项目。通过为父元素添加flex属性，即可控制子元素的位置与排列方式。一般情况下，主轴默认为X轴方向，侧轴则为Y轴方向。

接着，详细阐述了Flex容器的常见属性，包括flex-direction、justify-content、flex-wrap、align-content与align-items等。

其中，flex-direction属性用于设置主轴方向，justify-content则决定了主轴上的子元素排列方式。flex-wrap属性控制子元素是否换行，而align-content与align-items属性则分别对应侧轴上的子元素排列方式与单行情况下的排列方式。

最后，深入探讨了Flex项目常用的flex属性，包括auto、stretch、center、flex-start与flex-end等，以及它们在不同场景下的应用。

auto属性继承父容器的align-items属性，stretch属性沿主轴方向拉伸元素，center属性使元素在主轴方向上居中，而flex-start与flex-end属性则分别将元素按容器顶部或底部对齐。此外，baseline属性则使元素位于容器的基线上。