关于flex布局遇到的一些坑

最新推荐文章于 2024-04-03 14:25:31 发布

程序员小黑

最新推荐文章于 2024-04-03 14:25:31 发布

阅读量2.1k

点赞数 2

分类专栏： CSS 文章标签： flex css 前端

本文链接：https://blog.csdn.net/qq_36237569/article/details/115837909

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

程序员小黑

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
关于flex布局遇到的一些坑

flex布局相信大家已经很熟悉了，只要是写过CSS的朋友都清楚它有多好用，在过去flex布局还未出现时，实现垂直居中的样式是一件很麻烦的事情，但flex布局出来后，我基本就没有用过其它的方式了。虽然flex布局很好用，但是我在用的过程中也有遇到一些问题，在这里分享一些，说不定也有朋友遇到类似的问题。1. flex布局会导致文本省略失效<!DOCTYPE html><html lang="en"><head><style&gt...
复制链接

扫一扫