虽然我对flex的基本用法已经比较了解，但是在使用过程中还是会经常遇到些大大小小的问题。这篇博客在对flex的基本概念做一个简单的回顾后，将重点记录我在使用flex时踩过的一些坑，这篇博客也会一直更新。
本文结构：
首先要了解flex的两个最基本的概念，容器（flex container）和项目（flex item），flex container包含flex item。通过对flex container和flex item进行flex布局，可实现多种多样的布局效果。
flex container为容器，主要对各个flex item的排列方向、排列顺序、对齐方式进行设置。
| 属性 | 含义 | 取值 |
|---|---|---|
| flex-direction | 排列方向 | row(default)/row-reverse/column/column-reverse |
| flex-wrap | 是否换行 | nowrap(default)/wrap/wrap-reverse |
| flex-flow | flex-direction和flex-wrap的简写 | row nowrap(default) |
| justify-content | 主轴对齐方式 | flex-start/flex-end/center/space-between/space-around |
| align-items | 侧轴对齐方式 | flex-start/flex-end/center/baseline/stretch(default) |
| align-content | 多行/列内容对齐方式 | flex-start/flex-end/center/stretch/space-between/space-around |
flex item为项目，主要对item本身的一些特性进行设置。
| 属性 | 含义 | 取值 |
|---|---|---|
| order | 排列顺序 | 数值，默认为0，可为负值。flex item按照order从小到大排列 |
| flex-grow | 空间过多时增长比例 | 默认为0：即使存在剩余空间也不放大；数值不同：按比例划分 |
| flex-shrink | 空间不够时缩小比例 | 默认为1：等比例缩小；某项为0：不缩小 |
| flex-basis | 分配多余空间之前，项目占据的主轴空间 | <length> /auto(default) |
| flex | flex-grow、 flex-shrink、 flex-basis的缩写 | 默认为0 1 auto |
| align-self | 自身对齐方式 | auto/flex-start/flex-end/center/stretch/baseline |
其实这是一个很简单的东西，只是我经常忘记给flex container设置高度，导致使用align-items属性的时候，总是得不到我想要的结果。
现在我举一个“用户头像”的例子，当鼠标悬浮到用户头像上时，在用户头像的正中间出现“编辑”两个字，代码如下：
// html
<body><div class='user'></div>
</body>
// css
.user{margin-top:40px;height:200px;width:200px;background-image: url('.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;
}
结果：
我们把鼠标悬浮在头像上：
咦？为什么蓝色的两个字“编辑”没有在头像的正中间呢？你有没有看出什么问题？
我设置了align-items:center，那不就是让它在竖直方向居中么？为什么在竖直方向没有居中？
其实它在竖直方向已经居中了，不信？我们给这个flex container设置一个灰色背景，来看看这个flex container到底在哪里：
.user:hover::after{background:#ddd;
}
结果：
看到flex container的背景了吗？
在上面这段代码中，由于没有给flex container设置高度，flex container自动计算高度，就会出现这种情况。
我们现在给这个flex container设置一个高度：
.user:hover::after{height:inherit;
}
结果：
再把flex container的背景去掉：
其实这是一个很简单的东西，写代码的时候注意一下，把flex container的高度加上就行了，不要像我一样神经大条... [ 允悲 ]
上图来自阮一峰老师的“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的各属性值对应的位置如下图所示。
举例：
<body><div class='parent'><div class='child'></div></div>
</body>
.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;
}
结果：
结果符合我们的预期。粉色div在justify-content的“flex-start”位置上，也在align-items的“flex-end”的位置上。
2） flex-direction:row-reverse
在这种情况下，主轴方向相反，侧轴方向不变。justify-content和align-items的各属性值对应的位置如下图所示。
修改1）中的代码：
.parent{flex-direction:row-reverse;
}
结果：
我们看到，粉色div在justify-content的“flex-start”位置上，也在align-items的“flex-end”的位置上。
3）flex-direction:column
在这种情况下，主轴与侧轴的方向交换。justify-content和align-items的各属性值对应的位置如下图所示。
修改1）中的代码：
.parent{flex-direction:column;
}
结果：
我们看到，粉色div在justify-content的“flex-start”位置上，也在align-items的“flex-end”的位置上。
4） flex-direction:column-reverse
在这种情况下，主轴与侧轴的方向又发生了变化。justify-content和align-items的各属性值对应的位置如下图所示。
修改1）中的代码：
.parent{flex-direction:column-reverse;
}
结果：
我们看到，粉色div在justify-content的“flex-start”位置上，也在align-items的“flex-end”的位置上。
总结：主轴、侧轴的位置和方向根据flex-direction的不同而不同，并由此导致了justify-content和align-items的位置变化。在使用时一定要注意！！
使用flex遇到的坑就先记录到这里了，以后的坑以后再过来填。听说flex在移动端坑比较多，哈哈，但是我到现在还没遇到，看来还是要好好研究一下咯。
最后，给大家安利一个学习flex的小游戏Flexbox Froggy，可以加深对flex的认识，挺有趣的。
由于个人水平有限，博客错误之处，烦请指正！
作者：前端小少女
链接：
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
本文发布于:2024-02-04 14:03:55，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170708868956200.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
