CSS Flex 笔记里的常见疑问解答

在学习 CSS Flex 的过程中，可能会遇到一些疑问，本文将对这些疑问进行解答。

1. 什么是 Flex 容器？

   Flex 容器是指具有 flex 属性的元素，它可以将子元素排列成一行或一列，并允许子元素在容器内自由调整大小。

2. 什么是 弹性盒子模型？

   弹性盒子模型是 CSS3 中的一种布局模型，它允许开发人员更轻松地创建灵活、响应式的布局。Flex 布局的重点是容器的子元素，可以设置子元素的排列方式、对齐方式和尺寸。

3. Flex 属性有哪些？

   Flex 属性包括：

   • flex-grow：控制子元素在剩余空间中的增长比例。
   • flex-shrink：控制子元素在空间不足时的收缩比例。
   • flex-basis：控制子元素的初始大小。
   • flex-direction：控制子元素的排列方向。
   • flex-wrap：控制子元素是否换行。
   • justify-content：控制子元素在主轴上的对齐方式。
   • align-items：控制子元素在交叉轴上的对齐方式。
   • align-content：控制多行子元素在交叉轴上的对齐方式。
   • order：控制子元素的顺序。

4. Flex-direction 属性有哪些值？

   flex-direction 属性的值包括：

   • row：子元素从左到右排列。
   • row-reverse：子元素从右到左排列。
   • column：子元素从上到下排列。
   • column-reverse：子元素从下到上排列。

5. Flex-wrap 属性有哪些值？

   flex-wrap 属性的值包括：

   • nowrap：子元素不换行。
   • wrap：子元素自动换行。
   • wrap-reverse：子元素从下往上换行。

6. Justify-content 属性有哪些值？

   justify-content 属性的值包括：

   • flex-start：子元素在主轴的开头对齐。
   • flex-end：子元素在主轴的末尾对齐。
   • center：子元素在主轴的中间对齐。
   • space-around：子元素在主轴上均匀分布，两端都有空间。
   • space-between：子元素在主轴上均匀分布，但两端没有空间。

7. Align-items 属性有哪些值？

   align-items 属性的值包括：

   • flex-start：子元素在交叉轴的开头对齐。
   • flex-end：子元素在交叉轴的末尾对齐。
   • center：子元素在交叉轴的中间对齐。
   • stretch：子元素拉伸以填满整个交叉轴。
   • baseline：子元素在交叉轴上对齐其基线。

8. Align-content 属性有哪些值？

   align-content 属性的值包括：

   • flex-start：多行子元素在交叉轴的开头对齐。
   • flex-end：多行子元素在交叉轴的末尾对齐。
   • center：多行子元素在交叉轴的中间对齐。
   • space-around：多行子元素在交叉轴上均匀分布，两端都有空间。
   • space-between：多行子元素在交叉轴上均匀分布，但两端没有空间。
   • stretch：多行子元素拉伸以填满整个交叉轴。