弹性盒模型属性详解

弹性盒模型（Flexbox）是一种现代的CSS布局模型，它提供了更有效的方式来排列、对齐和分布容器中的元素。Flexbox布局非常适合创建复杂的布局结构，尤其是在不同屏幕尺寸和设备上。下面我们将详细介绍弹性盒模型的各个属性。

1. flex-grow
   flex-grow属性定义了弹性盒子元素的扩展比率。它允许元素根据其值来占用多余的空间。默认值为0，表示元素不会扩展。如果所有元素都设置了相同的flex-grow值，那么它们将等分多余的空间。
   示例：

   .container {
   display: flex;
   }
   .item1 {
   flex-grow: 1;
   }
   .item2 {
   flex-grow: 2;
   }

   在这个例子中，如果.container中的空间有多余的，.item2将占用两倍的空间，因为它的flex-grow值为2。
2. flex-shrink
   flex-shrink属性定义了弹性盒子元素的收缩比率。当容器空间不足时，这个属性决定了元素应如何收缩。默认值为1，表示元素会等比例缩小。如果将此值设置为0，元素不会收缩。
   示例：

   .container {
   width: 200px;
   display: flex;
   }
   .item1 {
   flex-shrink: 1;
   width: 100px;
   }
   .item2 {
   flex-shrink: 2;
   width: 200px;
   }

   在这个例子中，因为.container的宽度为200px，而.item1和.item2的宽度分别为100px和200px。当容器宽度小于300px时，.item2会收缩得比.item1更厉害，因为它有更大的flex-shrink值。
3. flex-basis
   flex-basis属性定义了弹性盒子元素的默认基准值，决定了元素在没有额外的空间或收缩的情况下的大小。它可以是长度值（如px、em等）、百分比或auto。默认值为auto，表示元素的原始大小。
4. flex-direction
   flex-direction属性定义了弹性盒子元素的排列方向。它有以下可能的值：row（默认值）、row-reverse、column和column-reverse。这个属性决定了子元素的主轴方向以及它们的对齐方式。
5. flex-wrap
   flex-wrap属性定义了当弹性盒子元素溢出容器时是否换行。它可以设置为nowrap（默认值）、wrap或wrap-reverse。这决定了容器内的子元素如何处理多余的空间或如何换行。
6. align-content
   align-content属性定义了如何对齐弹性盒子元素在主轴上的多行内容。它可以设置为flex-start、flex-end、center、space-between、space-around和space-evenly等值。这个属性在多行弹性盒子中非常有用，可以用来控制行之间的对齐方式。
7. align-items 和 align-self
   align-items属性定义了弹性盒子元素在交叉轴上的对齐方式，而align-self允许单个元素覆盖该容器的align-items值。这两个属性可以设置为flex-start、flex-end、center、baseline和stretch等值。它们用于控制元素在交叉轴上的对齐方式。
8. justify-content
   justify-content属性定义了弹性盒子元素在主轴上的对齐方式。它可以设置为flex-start、flex-end、center、space-between、space-around和space-evenly等值。这个属性用于控制元素在主轴上的排列方式。
9. order 属性和 flex-flow 简写属性**

• order属性用于定义弹性盒子元素的排列顺序，数值越小越排在前面。默认值为0。* flex-flow是一个简写属性，用于同时设置flex-direction和flex-wrap属性，其值为[ flex-direction] [/ ] [ flex-wrap]。例如，设置flex-flow: row wrap;