Flexbox

CSS3的伸缩盒子（Flexbox）布局是一种用于创建灵活且自适应的网页布局的技术。 它旨在提供一种简单、直观的方式来布局和对齐元素，适应不同的屏幕尺寸和设备。

伸缩盒子布局基于一个包含父元素（flex container）和其内部的伸缩项目（flex items）的概念。以下是伸缩盒子布局的基本原理和关键概念：https://www.nowcoder.com/issue/tutorial?zhuanlanId=Mg58Em&uuid=cabc6f51c4e54d8b848d9acd76139270

伸缩容器（Flex Container）：父元素被设置为伸缩容器，通过设置display: flex或display: inline-flex属性来启用伸缩盒子布局。伸缩容器包裹着伸缩项目，并负责定义伸缩项目在主轴（main axis）和交叉轴（cross axis）上的对齐方式和布局规则。

伸缩项（Flex Items）：伸缩容器内部的子元素被称为伸缩项，它们受到伸缩容器的控制。伸缩项的大小、顺序和对齐方式可以通过设置各种伸缩属性来控制。

主轴（Main Axis）和交叉轴（Cross Axis）：伸缩容器具有两个轴线，主轴和交叉轴。主轴是伸缩项排列的主要方向，而交叉轴是与主轴垂直的方向。它们的方向可以通过设置伸缩容器的flex-direction属性来控制。