flex布局相信大家已经很熟悉了,只要是写过CSS的朋友都清楚它有多好用,在过去flex布局还未出现时,实现垂直居中的样式是一件很麻烦的事情,但flex布局出来后,我基本就没有用过其它的方式了。
虽然flex布局很好用,但是我在用的过程中也有遇到一些问题,在这里分享一些,说不定也有朋友遇到类似的问题。
1. flex布局会导致文本省略失效
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.test {
display: flex;
width: 100px;
background: #a2cfff;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
</head>
<body>
<div class="test">
这是一段很长的文本,这是一段很长的文本
</div>
</body>
</html>
比如上面这段代码在浏览器会显示成,因为受flex布局的影响,导致省略号显示失败
去掉display: flex;这一句,就能正常显示了
但是有时候你又想使用flex布局怎么办?很简单在套一层标签就好了
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.test {
display: flex;
width: 100px;
background: #a2cfff;
}
span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
</head>
<body>
<div class="test">
<span>这是一段很长的文本,这是一段很长的文本</span>
</div>
</body>
</html>
这样也是能正常显示的
2. flex布局会让子元素拉伸
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.parent {
display: flex;
width: 200px;
height: 200px;
background: #a2cfff;
}
.child {
background: red;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">子元素</div>
</div>
</body>
</html>
上面的代码会显示成下面这样,子元素在垂直方向会被拉伸成和父元素一样的高度
我第一次碰到也觉得非常奇怪,后面找到了原因。这是由于align-items属性造成的,它的默认值是normal,normal在大多数情况下和stretch是一样的,会造成子元素在垂直方向被拉伸,把align-items的值设置成flex-start就可以了
3. flex布局中子元素平分占位
正常情况下,我们想让flex布局的子元素平分占位,会像下面这样写
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.parent {
display: flex;
width: 300px;
padding: 10px;
background: #a2cfff;
}
.child {
background: red;
padding: 10px;
flex-grow: 1;
}
.child1 {
background-color: rgb(218, 172, 255);
}
.child2 {
background-color: rgb(97, 181, 255);
}
.child3 {
background-color: rgb(255, 209, 57);
}
</style>
</head>
<body>
<div class="parent">
<div class="child child1">子元素1</div>
<div class="child child2">子元素2</div>
<div class="child child3">子元素3</div>
</div>
</body>
</html>
这是上面代码的显示样式,这是在子元素没有设置宽度的情况显示的样子
但如果子元素设置了宽度呢?比如下面的代码
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.parent {
display: flex;
width: 300px;
padding: 10px;
background: #a2cfff;
justify-content: space-between;
}
.child {
background: red;
padding: 10px;
flex-grow: 1;
}
.child1 {
width: 40px;
background-color: rgb(218, 172, 255);
}
.child2 {
width: 60px;
background-color: rgb(97, 181, 255);
}
.child3 {
width: 80px;
background-color: rgb(255, 209, 57);
}
</style>
</head>
<body>
<div class="parent">
<div class="child child1">子元素1</div>
<div class="child child2">子元素2</div>
<div class="child child3">子元素3</div>
</div>
</body>
</html>
上面的代码会显示成下面这样
可以看到设置了不同的宽度后就没有在平分宽度了,这是因为flew-grow是按父元素剩余空间分配的,父元素的宽度是300px,减去子元素的宽度为300-40-60-80=120px,120px再平分,每个元素宽度会在自己的宽度上加上120/3=40px,所以现在每个子元素的宽度从左到右分别是80px、100px、120px
但是如果遇到一种场景是不管子元素是否设置了宽度,我都想把它平分那该怎么做?其实也很简单,给子元素加上flex-basis: 0属性,这样子元素又能平分了
.child {
background: red;
padding: 10px;
flex-grow: 1;
flex-basis: 0;
}
flex-basis指定了flex 元素在主轴方向上的初始大小,默认值为auto,和width属性类似,如果同时设置了两个的值,flex-basis的优先级会更高。上面说了怎么分配剩余空间,其实flex-basis这个就是在分配剩余空间的时候,把子元素占的位置设置成0,那么大家分配到的空间就是一样的了,当然你把子元素的宽度都设置成0效果是一样的
4. 关于flex布局其它需要注意的点
- flex布局里float属性会失效
- flex布局里的所有元素都会按照flex容器的规则排列,不管是block还是inline元素,除了position为absolute和fixed