弹性盒子常用属性

1. display：用于启用弹性盒子布局。将其值设置为 flex 可以创建一个弹性容器。

2. flex-direction：用于定义弹性容器中项目的排列方向。默认值为 row，即水平排列。其他可能的值包括：

   • row：水平排列（默认）
   • row-reverse：反向水平排列
   • column：垂直排列
   • column-reverse：反向垂直排列

3. flex-wrap：用于定义项目的换行方式。默认值为 nowrap，即不换行。其他可能的值包括：

   • nowrap：不换行（默认）
   • wrap：换行
   • wrap-reverse：反向换行

4. justify-content：控制项目在主轴上的对齐方式。可以设置以下值：

   • flex-start：项目在主轴起点对齐
   • flex-end：项目在主轴终点对齐
   • center：项目在主轴上居中对齐
   • space-between：项目在主轴上均匀分布，首尾项目与容器边缘对齐
   • space-around：项目在主轴上均匀分布，项目两侧有相等的空白间隔
   • space-evenly：项目在主轴上均匀分布，包括首尾项目，空白间隔相等

5. align-items：控制项目在辅轴上的对齐方式。可以设置以下值：

   • flex-start：项目在辅轴起点对齐
   • flex-end：项目在辅轴终点对齐
   • center：项目在辅轴上居中对齐
   • baseline：项目按照基线对齐
   • stretch：项目拉伸以填充辅轴上的空间（默认值）

6. align-content：用于多行布局时控制行与行之间的对齐方式。仅在有换行的情况下生效。可以设置以下值：

   • flex-start：行在辅轴起点对齐
   • flex-end：行在辅轴终点对齐
   • center：行在辅轴上居中对齐
   • space-between：行在辅轴上均匀分布，首尾行与容器边缘对齐
   • space-around：行在辅轴上均匀分布，行两侧有相等的空白间隔
   • stretch：行拉伸以填充辅轴上的空间（默认值）