前端flex布局

1.1 flex有哪些属性 这些属性分别配置了什么

flex容器上的属性
flex-direction：用于指定 Flex 容器内子元素的主轴方向。
flex-direction: column; 主轴方向为垂直方向，起点在上沿；
flex-direction: column-reverse; 主轴方向为垂直方向，起点在下沿
flex-direction: row; 主轴为水平方向，起点在左端。
flex-direction: row-reverse; 主轴为水平方向，起点在右端。
justify-content: 用于控制 Flex 容器内子元素在主轴上的对齐方式。
align-items: 用于控制 Flex 容器内子元素在交叉轴上的对齐方式。
flex-wrap：用于控制子元素是否换行
align-content：用于控制多行子元素在交叉轴上的对齐方式
flex-flow： 属性能够更简便地同时设置主轴方向和子元素是否换行

flex-grow：指定 Flex 项目的放大比例，决定了子元素在剩余空间中分配的比例。
flex-shrink：指定 Flex 项目的缩小比例，决定了子元素在空间不足时收缩的比例
flex-basis：设置 Flex 项目在分配多余空间之前的基础大小
order: number：用于指定 Flex 项目的排列顺序，数值越小越靠前，默认为 0
align-self: 是用于在 Flex 布局中控制单个 Flex 项目（子元素）在交叉轴上的对齐方式的 CSS 属性。
flex:用于设置弹性盒子容器中的子元素如何分配剩余空间。

1.2 flex:1 代表着什么
当设置flex:1时，元素的尺寸会根据父容器的剩余空间分配，并且会被拉伸或收缩以填充剩余空间。如果父容器有多个子元素，则其中一个设置有flex:1的子元素会占用所有剩余的可用空间。
当所有子元素都设置为flex:1时，它们将平均分配父容器的可用空间。如果某个子元素具有固定的宽度或高度，那么它将不会被拉伸或收缩，并且其他子元素将占用剩余的空间。
flex:1;===flex: 1 1 0 ;等同于 flex-grow:1;flex-shrink:1;flex-basis:0，元素可以在flex-basis为 0 的基础上伸缩。
tips: flex:2 呢？？？
flex:2;===flex: 2 1 0 ;等同于 flex-grow:2;flex-shrink:1;flex-basis:0，元素可以在flex-basis为 0 的基础上伸缩。
1.3 使用flex布局有什么优势？为什么会有flex？ 跟传统的布局有什么区别？
(1) flex布局优势：
flex布局，可以简便、完整、响应式地实现各种页面布局，可为复杂的布局和对齐问题提供了更简洁、预测性和弹性的解决方案。Flex容器可以不基于固定尺寸动态地调整其大小。对于响应式设计尤其有用。
(2) 为什么会有flex？
在响应式设计、移动优先策略以及多种设备和屏幕尺寸的背景下，传统的布局方法（浮动和定位）表现得非常受限。Flex布局被引入CSS规范，主要是为了解决这些问题，使布局更加直观和一致。
(3) 跟传统的布局有什么区别？
浮动布局：在浮动布局中，元素会脱离文档流。这会导致清除浮动的问题，并需要额外的代码来确保正确的布局。
定位布局：定位布局使用position属性（如relative、absolute、fixed）来控制元素的位置。这常常导致层叠和重叠的问题，并且需要手动管理位置和堆栈顺序。
相较于这些方法，flex布局提供了更直观、更简单的布局方式。