flex布局踩过的坑

最新推荐文章于 2024-08-18 00:57:55 发布

仗剑天涯，从摘要开始

最新推荐文章于 2024-08-18 00:57:55 发布

阅读量843

点赞数 2

分类专栏：移动web开发

本文链接：https://blog.csdn.net/my_new_way/article/details/103783462

版权

移动web开发专栏收录该内容

7 篇文章 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的排列方向、排列顺序、对齐方式进行设置。

属性	含义	取值
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

2、 flex item

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

二、踩过的坑

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;
}

结果：

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

咦？为什么蓝色的两个字“编辑”没有在头像的正中间呢？你有没有看出什么问题？
我设置了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的高度加上就行了，不要像我一样神经大条... [ 允悲 ]

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

上图来自阮一峰老师的“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的认识，挺有趣的。

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

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

仗剑天涯，从摘要开始

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录