flex布局踩过的坑

àì夳堔傛蜴生んèń 2023-06-26 10:50 16阅读 0赞

虽然我对flex的基本用法已经比较了解，但是在使用过程中还是会经常遇到些大大小小的问题。这篇博客在对flex的基本概念做一个简单的回顾后，将重点记录我在使用flex时踩过的一些坑，这篇博客也会一直更新。

本文结构：

*  **flex布局基本概念**
    
    1.  flex container
    2.  flex item
 *  **踩过的坑**
    
    1.  flex container的高度问题
    2.  flex-direction与justify-content、align-items的对应关系

## 一、flex布局基本概念 ##

首先要了解flex的两个最基本的概念，容器（flex container）和项目（flex item），flex container包含flex item。通过对flex container和flex item进行flex布局，可实现多种多样的布局效果。

### 1、flex container ###

flex container为容器，主要对各个flex item的排列方向、排列顺序、对齐方式进行设置。

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>含义</th> 
   <th>取值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>flex-direction</td> 
   <td>排列方向</td> 
   <td>row(default)/row-reverse/column/column-reverse</td> 
  </tr> 
  <tr> 
   <td>flex-wrap</td> 
   <td>是否换行</td> 
   <td>nowrap(default)/wrap/wrap-reverse</td> 
  </tr> 
  <tr> 
   <td>flex-flow</td> 
   <td>flex-direction和flex-wrap的简写</td> 
   <td>row nowrap(default)</td> 
  </tr> 
  <tr> 
   <td>justify-content</td> 
   <td>主轴对齐方式</td> 
   <td>flex-start/flex-end/center/space-between/space-around</td> 
  </tr> 
  <tr> 
   <td>align-items</td> 
   <td>侧轴对齐方式</td> 
   <td>flex-start/flex-end/center/baseline/stretch(default)</td> 
  </tr> 
  <tr> 
   <td>align-content</td> 
   <td>多行/列内容对齐方式</td> 
   <td>flex-start/flex-end/center/stretch/space-between/space-around</td> 
  </tr> 
 </tbody> 
</table>

### 2、 flex item ###

flex item为项目，主要对item本身的一些特性进行设置。

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>含义</th> 
   <th>取值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>order</td> 
   <td>排列顺序</td> 
   <td>数值，默认为0，可为负值。flex item按照order从小到大排列</td> 
  </tr> 
  <tr> 
   <td>flex-grow</td> 
   <td>空间过多时增长比例</td> 
   <td>默认为0：即使存在剩余空间也不放大；数值不同：按比例划分</td> 
  </tr> 
  <tr> 
   <td>flex-shrink</td> 
   <td>空间不够时缩小比例</td> 
   <td>默认为1：等比例缩小；某项为0：不缩小</td> 
  </tr> 
  <tr> 
   <td>flex-basis</td> 
   <td>分配多余空间之前，项目占据的主轴空间</td> 
   <td>&lt;length&gt; /auto(default)</td> 
  </tr> 
  <tr> 
   <td>flex</td> 
   <td>flex-grow、 flex-shrink、 flex-basis的缩写</td> 
   <td>默认为0 1 auto</td> 
  </tr> 
  <tr> 
   <td>align-self</td> 
   <td>自身对齐方式</td> 
   <td>auto/flex-start/flex-end/center/stretch/baseline</td> 
  </tr> 
 </tbody> 
</table>

## 二、踩过的坑 ##

### 1、 flex container的高度问题 ###

其实这是一个很简单的东西，只是我经常忘记给flex container设置高度，导致使用align-items属性的时候，总是得不到我想要的结果。  
现在我举一个“用户头像”的例子，当鼠标悬浮到用户头像上时，在用户头像的正中间出现“编辑”两个字，代码如下：

// html
    <body>
      <div class='user'></div>
    </body>

// css
    .user{
      margin-top:40px;
      height:200px;
      width:200px;
      background-image: url('http://opjc44vzf.bkt.clouddn.com/17-5-6/32601215-file_1494081396100_da5d.jpg');
      background-size:200px 200px;
      border-radius:50%;
      box-shadow:0px 0px 6px 1px rgba(0,0,0,0.3) inset;
      overflow:hidden;
    }
    .user:hover::after{
      content:'编辑';
      color:#ffffff;
      font-size:30px;
      font-weight:bold;
      cursor:pointer;
      display:flex;
      justify-content:center;
      align-items:center;
    }

结果：

![format_png][]

我们把鼠标悬浮在头像上：

![format_png 1][]

咦？为什么蓝色的两个字“编辑”没有在头像的正中间呢？你有没有看出什么问题？  
我设置了`align-items:center`，那不就是让它在竖直方向居中么？为什么在竖直方向没有居中？

其实它在竖直方向已经居中了，不信？我们给这个flex container设置一个灰色背景，来看看这个flex container到底在哪里：

.user:hover::after{
      background:#ddd;
    }

结果：

![format_png 2][]

看到flex container的背景了吗？

在上面这段代码中，由于没有给flex container设置高度，flex container自动计算高度，就会出现这种情况。

我们现在给这个flex container设置一个高度：

.user:hover::after{
       height:inherit;
    }

结果：

![format_png 3][]

再把flex container的背景去掉：

![format_png 4][]

其实这是一个很简单的东西，写代码的时候注意一下，把flex container的高度加上就行了，不要像我一样神经大条... \[ 允悲 \]

### 2、flex-direction与justify-content、align-items的对应关系 ###

![format_png 5][]

上图来自阮一峰老师的[“Flex 布局教程：语法篇”][Flex]，网上也大致都是类似的图解，所以我就理所当然地以为，横着的方向就是主轴，竖着的那条就是侧轴；从左到右是主轴的方向，从上到下是侧轴的方向。可是很快，在使用justify-content、align-items时就出现了问题。通过查阅资料才发现，主轴、侧轴的位置和方向都是与flex-direction的设置有关！

我们知道，flex-direction有以下几种取值：row/row-reverse/column/column-reverse。当flex-direction取值不同时，主轴和侧轴的位置、方向都是不同的。接下来，我们设置flex container的`justify-content:flex-start`、`align-items:flex-end`，改变flex-direction的值来看结果。

1） flex-direction:row

这是最常见并且默认的一种。在这种情况下，主轴和侧轴也是以最常见的方式排列。justify-content和align-items的各属性值对应的位置如下图所示。

![format_png 6][]

举例：

.parent{
      width:300px;
      height:300px;
      background:#ddd;
      display:flex;
      justify-content:flex-start;
      align-items:flex-end;
      flex-direction:row;
    }
    .child{
      width:100px;
      height:100px;
      background:pink;
    }

结果：

![format_png 7][]

结果符合我们的预期。粉色div在justify-content的“flex-start”位置上，也在align-items的“flex-end”的位置上。

2） flex-direction:row-reverse

在这种情况下，主轴方向相反，侧轴方向不变。justify-content和align-items的各属性值对应的位置如下图所示。

![format_png 8][]

修改1）中的代码：

.parent{
      flex-direction:row-reverse;
    }

结果：

![format_png 9][]

我们看到，粉色div在justify-content的“flex-start”位置上，也在align-items的“flex-end”的位置上。

3）flex-direction:column

在这种情况下，主轴与侧轴的方向交换。justify-content和align-items的各属性值对应的位置如下图所示。

![format_png 10][]

修改1）中的代码：

.parent{
      flex-direction:column;
    }

结果：

![format_png 11][]

我们看到，粉色div在justify-content的“flex-start”位置上，也在align-items的“flex-end”的位置上。

4） flex-direction:column-reverse

在这种情况下，主轴与侧轴的方向又发生了变化。justify-content和align-items的各属性值对应的位置如下图所示。

![format_png 12][]

修改1）中的代码：

.parent{
      flex-direction:column-reverse;
    }

结果：

![format_png 13][]

我们看到，粉色div在justify-content的“flex-start”位置上，也在align-items的“flex-end”的位置上。

> 总结：主轴、侧轴的位置和方向根据flex-direction的不同而不同，并由此导致了justify-content和align-items的位置变化。在使用时一定要注意！！

使用flex遇到的坑就先记录到这里了，以后的坑以后再过来填。听说flex在移动端坑比较多，哈哈，但是我到现在还没遇到，看来还是要好好研究一下咯。

最后，给大家安利一个学习flex的小游戏[Flexbox Froggy][]，可以加深对flex的认识，挺有趣的。

由于个人水平有限，博客错误之处，烦请指正！

作者：前端小少女  
链接：https://www.jianshu.com/p/d1d78fdd5b78  
来源：简书  
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjE3MTMzLTI4OTAxYTU2YjMwNTI2ZWEucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMjY0L2Zvcm1hdC93ZWJw?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjE3MTMzLTczNTA0MTkxYmViNTYwY2UucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMjU0L2Zvcm1hdC93ZWJw?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjE3MTMzLTMwZTdkOWZjMGJiZThlOWYucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMjY2L2Zvcm1hdC93ZWJw?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjE3MTMzLTExN2RkMjEyNzk5ZDYxMGIucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMjY4L2Zvcm1hdC93ZWJw?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjE3MTMzLWFjMjIzNjA0OGViMDRhNGYucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMjY5L2Zvcm1hdC93ZWJw?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjE3MTMzLWQ1ODBjNzZhZjYzZTFiYTcucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvNTYzL2Zvcm1hdC93ZWJw?x-oss-process=image/format,png
[Flex]: https://link.jianshu.com?t=http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjE3MTMzLTFlNjU4ODcwYzViMmEwYzUucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvNzg1L2Zvcm1hdC93ZWJw?x-oss-process=image/format,png
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjE3MTMzLTY0MDY3OGIxN2UyZjhmYzAucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMzk1L2Zvcm1hdC93ZWJw?x-oss-process=image/format,png
[format_png 8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjE3MTMzLWJiM2Q2Yzk3YzExNTMxZDUucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvODIxL2Zvcm1hdC93ZWJw?x-oss-process=image/format,png
[format_png 9]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjE3MTMzLWZhMjUzZjRhMzZmYTI2OTUucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMzg5L2Zvcm1hdC93ZWJw?x-oss-process=image/format,png
[format_png 10]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjE3MTMzLTAwYTI2ZmI3ZTllNmU4ZmIucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvNzg3L2Zvcm1hdC93ZWJw?x-oss-process=image/format,png
[format_png 11]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjE3MTMzLTBmM2MwZmQyZTliY2JmOGUucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMzg2L2Zvcm1hdC93ZWJw?x-oss-process=image/format,png
[format_png 12]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjE3MTMzLTczMGEzZTYxNWY4NWVmMmYucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvNzk3L2Zvcm1hdC93ZWJw?x-oss-process=image/format,png
[format_png 13]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjE3MTMzLTkyNTA3YjA1ZTAwZDcyZTkucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMzg0L2Zvcm1hdC93ZWJw?x-oss-process=image/format,png
[Flexbox Froggy]: https://link.jianshu.com?t=http://flexboxfroggy.com/#zh-cn