flex布局下你可能忽视的宽度、高度问题

Moses-233

已于 2023-08-29 10:03:50 修改

阅读量949

点赞数

分类专栏：每日面试题打卡文章标签： css3 前端

于 2023-08-29 09:57:52 首次发布

本文链接：https://blog.csdn.net/hmmmmm/article/details/132554219

版权

每日面试题打卡专栏收录该内容

1 篇文章 0 订阅

订阅专栏

今天重新复习巩固一下flex布局，发现了一个很有趣的事情。之前研究flex布局，只关注了方向、位置这些信息，今天试着给父子元素加上了高宽，发现了一些和我想的不一样的地方，和大家分享一下。

首先是不换行的情况

    <div style="display: flex;background-color:cornflowerblue;width: 200px;height: 200px">
      <div style="background-color: #ffffff68;width:50px;height:50px">1</div>
      <div style="background-color: #ffffff68;width:50px;height:50px">2</div>
      <div style="background-color: #ffffff68;width:50px;height:50px">3</div>
      <div style="background-color: #ffffff68;width:50px;height:50px">4</div>
      <div style="background-color: #ffffff68;width:50px;height:50px">5</div>
      <div style="background-color: #ffffff68;width:50px;height:50px">6</div>
      <div style="background-color: #ffffff;width:50px;height: 50px;">7</div>
    </div>

大家可以先思考一下，得到的会是怎么样的布局？是只展示了前4个字元素呢还是7个元素都展示了但是后面几个元素展示在了父元素外
现在答案揭晓，所有的元素都展示在了父元素内，在子元素上写的宽度都失效了。
子元素都展示在父元素里

然后是换行的效果

    <div style="display: flex;background-color:cornflowerblue;width: 200px;height: 200px;flex-wrap: wrap;">
      <div style="background-color: #ffffff68;width:50px;height:50px">1</div>
      <div style="background-color: #ffffff68;width:50px;height:50px">2</div>
      <div style="background-color: #ffffff68;width:50px;height:50px">3</div>
      <div style="background-color: #ffffff68;width:50px;height:50px">4</div>
      <div style="background-color: #ffffff68;width:50px;height:50px">5</div>
      <div style="background-color: #ffffff68;width:50px;height:50px">6</div>
      <div style="background-color: #ffffff;width:50px;height: 50px;">7</div>
    </div>

思考时间！大家想一下这段代码的效果会是什么呢？
答案揭晓，和你们想的是一样的吗，反正和我想的不一样，我以为会是567紧贴着123，没想到实际效果是中间还隔着这么一大段鸿沟，这让我很疑惑，于是我调整代码，去掉了一些高度看看效果。
在这里插入图片描述

首先我去掉了3和7的高度，让它们自适应

    <div style="display: flex;background-color:cornflowerblue;width: 200px;height: 200px;flex-wrap: wrap;">
      <div style="background-color: #ffffff68;width:50px;height:50px">1</div>
      <div style="background-color: #ffffff68;width:50px;height:50px">2</div>
      <div style="background-color: #ffffff68;width:50px;">3</div>
      <div style="background-color: #ffffff68;width:50px;height:50px">4</div>
      <div style="background-color: #ffffff68;width:50px;height:50px">5</div>
      <div style="background-color: #ffffff68;width:50px;height:50px">6</div>
      <div style="background-color: #ffffff;width:50px;">7</div>
    </div>

得到的效果如下，这样看，是不是子元素的高度其实也失效了，我又试了试其他情况
在这里插入图片描述

我把7的高度增加到了100px

    <div style="display: flex;background-color:cornflowerblue;width: 200px;height: 200px;flex-wrap: wrap;">
      <div style="background-color: #ffffff68;width:50px;height:50px">1</div>
      <div style="background-color: #ffffff68;width:50px;height:50px">2</div>
      <div style="background-color: #ffffff68;width:50px;">3</div>
      <div style="background-color: #ffffff68;width:50px;height:50px">4</div>
      <div style="background-color: #ffffff68;width:50px;height:50px">5</div>
      <div style="background-color: #ffffff68;width:50px;height:50px">6</div>
      <div style="background-color: #ffffff;width:50px;height:100px">7</div>
    </div>

得到的效果如下，这又和我想到很不一样，我以为7会挤压3的高度，我没想到5和6也会是一样的效果！我接着试了试其他情况
在这里插入图片描述

把7的高度调小
这时5和6并没有受到影响

    <div style="display: flex;background-color:cornflowerblue;width: 200px;height: 200px;flex-wrap: wrap;">
      <div style="background-color: #ffffff68;width:50px;height:50px">1</div>
      <div style="background-color: #ffffff68;width:50px;height:50px">2</div>
      <div style="background-color: #ffffff68;width:50px;">3</div>
      <div style="background-color: #ffffff68;width:50px;height:50px">4</div>
      <div style="background-color: #ffffff68;width:50px;height:50px">5</div>
      <div style="background-color: #ffffff68;width:50px;height:50px">6</div>
      <div style="background-color: #ffffff;width:50px;height:10px">7</div>
    </div>