flex（弹性盒子）：1的变化，以及flex对width的影响！

最新推荐文章于 2024-01-04 16:13:04 发布

钟阿能

最新推荐文章于 2024-01-04 16:13:04 发布

阅读量6.7k

点赞数 7

分类专栏：不懂就要问文章标签： 1024程序员节

本文链接：https://blog.csdn.net/qq_27802993/article/details/109268513

版权

不懂就要问专栏收录该内容

6 篇文章 0 订阅

订阅专栏

生命不息，学习不止

在今天这个日子，祝愿所有程序员们的世界，永远没有bug

在这里插入图片描述

接下来，打开电脑！

关于疑问：

一、弹性盒子flex：1的变化？

二、弹性盒子对子元素width的影响？

调试代码：

(纯CSS实现手风琴效果)

<div class="box">
    <ul>
        <li>
        	<span>谨防三大减肥</span>
        </li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

*{
    margin: 0;
    padding: 0;
}
body{
    background: url(bg.png);
}
li{
    list-style: none;
}
.box{
    width: 1200px;
    height: 480px;
    border: 1px solid #f00;
    margin: 100px auto;
}
.box ul{
    height: 100%;
    display: flex;
}
ul>li{
    white-space: nowrap;
    position: relative;
    width: 120px;
    transition-duration: 1s;
    border: 1px solid #f40;
}
ul>li>img{
    height: 100%;
}
ul>li:nth-child(1){
    background: url(img1.jpg) no-repeat left center;
    background-size: cover;
}
ul>li:nth-child(2){
    background: url(img2.jpg) no-repeat left center;
    background-size: cover;
}
ul>li:nth-child(3){
    background: url(img3.jpg) no-repeat left center;
    background-size: cover;
}
ul>li:nth-child(4){
    background: url(img4.jpg) no-repeat left center;
    background-size: cover;
}
ul>li:nth-child(5){
    background: url(box_img2.png) no-repeat left center;
    background-size: cover;
}
ul>li>span{		
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 60px;
    color: #fff;
    font-size: 22px;
    text-align: center;
    background-color: rgba(0,0,0,0.5);
}
ul>li:hover{
   /* width: 100%; */
	flex: 1;
}

效果图如下：

在这里插入图片描述

疑问解析：

一、弹性盒子flex：1的变化？

核心代码如下：

在这里插入图片描述

给所有li 的宽度设为固定值：120px；当鼠标悬浮li的时候，给当前悬浮的li设置为flex：1（铺满父元素剩下的宽度）。

这样设置会出现如下情况：

在这里插入图片描述

从绿色框的位置移入，会把li放大到上图的效果（黄色框内）。（没有问题，肯定不推荐）

但是从绿色框以外移入就会出现闪烁的问题，如下图效果。1和2发生重叠（有问题）

图中看不出明显效果，建议大家复制上方的代码，进入浏览器调试。

在这里插入图片描述

关键：

发生闪烁重叠的原因，我个人分析是因为flex：1，它会铺满父元素剩下的宽度。

但它在铺满前，大概会减掉自己90%的宽度，再进行铺满的设置。

这个时候后方的li就会往前方移动，鼠标同时选中两个li，就发生了重叠，并且出现闪烁。

为了解决重叠闪烁的问题，我把flex：1，修改成了width：100%；

就好了

也就是下面的疑问

二、弹性盒子对子元素width的影响？

平常对width的认识：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 400px;
            background-color: pink;
        }
        .div1{
            width: 100%;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
   <div class="box">
       <div class="div1">
       </div>
   </div> 
</body>
</html>

效果如下：

在这里插入图片描述

可见对.div1设置的width：100%,是以父元素的width为基准的。（这是我们平常对width的理解）

但在flex（弹性盒子布局）中，子元素的width发生了变化。

在最上面的（纯CSS实现手风琴）代码中，我们把flex：1，修改成width：100%；

就解决了疑问一（重叠和闪烁）中所提到的问题，

在这里插入图片描述

flex（弹性盒子）里面子元素的宽度为100%，就代表父元素剩余宽度的100%；

总结：

弹性盒子flex：1的变化？

父元素为flex布局（手风琴案例），子元素宽度为固定值，鼠标悬浮样式修改为，flex：1。就会出现重叠闪烁的问题。

因为flex：1（会铺满父元素剩下的宽度）

但它在铺满前，大概会减掉自己90%的宽度，再进行铺满的设置。

后方的元素往前方移动，鼠标选中两个li，发生了重叠，并且出现闪烁。
弹性盒子对子元素width的影响？

父元素宽度为120px，给子元素设置宽度为100%，那么子元素宽度也为120px（子元素的%单位，是根据父元素的宽度而定）。

但在弹性盒子下，子元素的宽度不再以父元素宽度为基准，而是以父元素剩下的宽度为基准。

钟阿能

关注

7
点赞
踩
10

收藏

觉得还不错? 一键收藏
4
评论
flex（弹性盒子）：1的变化，以及flex对width的影响！

生命不息，学习不止在今天这个日子，祝愿所有程序员们的世界，永远没有bug接下来，打开电脑！关于疑问：弹性盒子flex：1的变化？弹性盒子对子元素width的影响？调试代码：(纯CSS实现手风琴效果)<div class="box"> <ul> <li> <span>谨防三大减肥</span> </li> <l
复制链接

扫一扫