三个flex属性对元素的影响

一、flexbox布局简介

Flexbox是CSS3的特性之一，在设计网站布局时，使用Flexbox可以让我们更加容易地实现响应式设计。Flexbox布局主要由三个属性组成，它们是：弹性容器，弹性项目，弹性流。

1.弹性容器

弹性容器是一个包含弹性项目的盒子。如果一个HTML元素被设置为Flex容器，那么该元素的所有子元素都是Flex项目，这些元素可以水平或垂直排列，可以根据需要调整宽度和高度。

Flex容器有两个重要的属性，分别是flex-direction和flex-wrap。我们可以通过设置这两个属性来控制Flex项目的布局方式。flex-direction属性用于设置Flex项目的主轴方向，它有以下四个属性值:

.container {
    display: flex;
    flex-direction: row;/*项目水平排列，默认值；*/
    flex-direction: column;/*项目垂直排列；*/
    flex-direction: row-reverse;/*从右到左排列；*/
    flex-direction: column-reverse;/*从下到上排列；*/
}

flex-wrap属性用于设置Flex项目的换行方式。默认情况下，Flex项目是不会换行的，如果Flex容器的宽度不足，Flex项目的宽度可能会被压缩。此时，可以使用flex-wrap属性控制Flex项目的换行方式。flex-wrap属性有以下三个值：nowrap（默认值）,wrap,wrap-reverse。

.container {
    display: flex;
    flex-wrap: nowrap;/*不换行，控制Flex项目压缩宽度*/
    flex-wrap: wrap;/*换行，控制Flex项目自动排列，根据容器宽度自动调整*/
    flex-wrap: wrap-reverse;/*反方向换行，控制Flex项目从下倒上自动排列*/
}

2. 弹性项目

弹性项目是Flex容器的子元素。Flex项目在Flex容器的主轴方向上排列。可以通过设置Flex项目的flex属性来调整Flex项目在主轴方向上的长度。Flex项目有以下三个方向：纵向（主轴），横向（交叉轴），垂直（交叉轴文本方向的反向）。

.item {
    flex: 1;/*将Flex项目在主轴方向上的长度设置为1*/
    flex: 0 1 auto;/*弹性项目长度的三个公式代表含义：不放大、缩小、默认宽度*/
}

Flex项目的flex属性由三个值组成：flex-grow、flex-shrink、flex-basis。flex-grow用于设置Flex项目在主轴方向上的长度增长系数，flex-shrink用于设置Flex项目在主轴方向上的长度缩小系数，flex-basis用于设置弹性项目在主轴方向上的初始长度。可以将这三个属性组合使用成为一种可以匹配多个屏幕尺寸和布局的自适应解决方案。

3. 弹性流

弹性流是指Flex项目在Flex容器中的排列方式，可以在Flex容器的主轴和交叉轴方向上进行排列。我们可以通过设置justify-content和align-items属性来实现Flex项目在主轴和交叉轴方向上的排列方式。

justify-content属性用于设置Flex项目在主轴方向上的对齐方式，如水平居中、左对齐、右对齐等。它有以下5个属性值：

.container {
    display: flex;
    justify-content: flex-start;/*默认左对齐*/
    justify-content: flex-end;/*右对齐*/
    justify-content: center;/*水平居中*/
    justify-content: space-between;/*平均分配容器中的空间*/
    justify-content: space-around;/*平均分配容器中的空间并使各Flex项目之间具有相等的距离*/
}

align-items属性用于设置Flex项目在交叉轴方向上的对齐方式。它有以下4个属性值：

.container {
    display: flex;
    align-items: flex-start;/*上对齐*/
    align-items: flex-end;/*下对齐*/
    align-items: center;/*垂直居中*/
    align-items: stretch;/*填满容器*/
}

二、flex-grow属性与Flex项目的自适应解决方案

Flexbox的一大使用场景就是通过设置Flex项目的flex-grow属性来实现弹性布局。如果设置了flex-grow的值大于1，会将剩余的部分平分给所有的Flex项目，从而实现自适应布局的效果。

例如，我们可以将3个Flex项目设置为Flex容器，然后设置它们在主轴方向上的长度.为了让Flex项目可以自适应，可对其中一个Flex项目设置flex-grow属性为1，表示任何多余的空间都将平分给这个Flex项目。而另外两个Flex项目的值将是固定值，它们的长度将不会发生变化，如下所示：

.container {
  display: flex;
}
.item-1 {
  width: 100px;
  height: 100px;
  margin-right: 10px;
  background: red;
}
.item-2 {
  width: 200px;
  height: 100px;
  margin-right: 10px;
  background: blue;
}
.item-3 {
  width: 300px;
  height: 100px;
  background: green;
  flex-grow: 1;
}

在上例中，.item-3元素的flex-grow属性为1，为了让Flex项目自适应，就将剩余的部分分配给该Flex项目，使得其自适应剩下的空间。同时，.item-2和.item-3的长度是固定不变的，它们的长度不会发生变化，从而实现了自适应布局的效果。

这里 .item-3 的高度值不设置是有意义的，如果只在width属性中添加尺寸，那么子容器的高度，就会根据子元素的内容自适应，调整子容器的高度时，就需要重设整个布局，而加在flex-basis中的就是父容器的高度，被子元素均分。

三、flex-shrink与Flex项目的自适应解决方案

除了设置flex-grow属性，我们还可以使用flex-shrink属性来实现自适应布局的效果。Flex-shrink属性指定了Flex项目在主轴空间不足时的缩小比例。

例如，我们可以将3个Flex项目设置为Flex容器，然后设置它们在主轴方向上的长度。如果容器的可用，则Flex项目会缩小其长度以适应其在Flex容器中的大小。现在，我们可以为每个Flex项目分配一个flex-shrink属性，来使其在缩放时具有不同的缩放比例。当然，如果Flex项目的长度已经是最小长度，则不需要再缩小它们的大小。如下所示：

.container {
  display: flex;
}
.item {
  height: 100px;
  margin-right: 10px;
  background: red;
  flex-grow: 1;
}
.item-shrink1 {
  width: 200px;
  flex-shrink: 1;
}
.item-shrink2 {
  width: 300px;
  flex-shrink: 2;
}

在上例中，.item-shrink1的flex-shrink属性值为1，.item-shrink2的flex-shrink属性值为2。意味着在缩放时，.item-shrink2项目将尽可能地缩小。.item-shrink1项目只会在容器的可用宽度不足以容纳其所有内容时，才会缩小其长度。

如果容器的宽度增加，则所有Flex项目的长度也会相应地增加，直到它们不再需要缩小长度。这也就是自适应宽度布局的效果。

四、flex-wrap属性与Flex布局的换行

Flexbox还提供了另一个非常有用的属性，即flex-wrap属性。默认情况下，Flex项目不会换行，并且在Flex容器中水平或垂直排列。然而，如果要创建一个具有自适应宽度的Flex容器，我们可能需要分配多于一个Flex项目。此时，如果容器的宽度小于所有Flex项目的宽度总和，则Flex项目将不能一次性显示在一行上，这时，我们就需要使用flex-wrap属性来控制Flex项目的换行方式了。

如下所示，我们可以将多个Flex项目设置为Flex容器，然后通过设置flex-wrap属性来控制Flex项目的自动换行。

.container {
  display: flex;
  flex-wrap: wrap;
}
.item {
  width: 100px;
  height: 100px;
  margin-right: 10px;
  background: red;
}

在上例中，我们通过设置.flex-container的flex-wrap属性为wrap来控制Flex项目的换行方式。这意味着当Flex项目的总长度大于.flex-container元素的长度时，Flex项目将被拆分为多行，以适应容器的宽度。如果容器的宽度继续增加，则在布局中添加更多的Flex项目，它们将被添加到新的一行。

五、总结

Flexbox布局提供了弹性布局的解决方案，让我们在设计网站布局时更加容易，同时也提供了许多灵活的属性，使得我们可以根据不同设备的屏幕尺寸和布局需求来配置Flexbox容器和Flex项目等，实现自适应布局的效果。同时，通过使用flex-grow和flex-shrink这两个属性，我们还可以动态地控制Flex项目的宽度自适应。

在使用Flexbox布局时，我们需要注意以下几点：

弹性容器必须是Flexbox容器。

Flexbox项目必须是Flex容器的直接子元素。

要想在Flex项目中使用flex-grow、flex-shrink和flex-basis属性，必须设置display属性为flex。

默认情况下，Flex项目不会换行和自动排列。

总之，Flexbox布局是一项非常有用的CSS3特性，可以帮助我们实现各种布局需求，并且可以解决CSS布局中的许多问题。我们应该尽可能学习和使用Flexbox布局，以便更好地设计和构建响应式网站。