• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

flex(弹性盒子):1的变化,以及flex对width的影响!

互联网 diligentman 1个月前 (10-26) 20次浏览

生命不息,学习不止

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

flex(弹性盒子):1的变化,以及flex对width的影响!

接下来,打开电脑!


关于疑问:

一、弹性盒子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的变化,以及flex对width的影响!


疑问解析:

一、弹性盒子flex:1的变化?

核心代码如下:

flex(弹性盒子):1的变化,以及flex对width的影响!
flex(弹性盒子):1的变化,以及flex对width的影响!
flex(弹性盒子):1的变化,以及flex对width的影响!

给所有li 的宽度设为固定值:120px;当鼠标悬浮li的时候,给当前悬浮的li设置为flex:1(铺满父元素剩下的宽度)。

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

flex(弹性盒子):1的变化,以及flex对width的影响!

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

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

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

flex(弹性盒子):1的变化,以及flex对width的影响!

关键:

发生闪烁重叠的原因,我个人分析是因为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>

效果如下:

flex(弹性盒子):1的变化,以及flex对width的影响!

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

但在flex(弹性盒子布局)中,子元素的width发生了变化。

在最上面的(纯CSS实现手风琴)代码中,我们把flex:1,修改成width:100%;

就解决了疑问一(重叠和闪烁)中所提到的问题,

flex(弹性盒子):1的变化,以及flex对width的影响!

flex(弹性盒子)里面子元素的宽度为100%,就代表父元素剩余宽度的100%;


总结:

  1. 弹性盒子flex:1的变化?

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

    因为flex:1(会铺满父元素剩下的宽度)

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

    后方的元素往前方移动,鼠标选中两个li,发生了重叠,并且出现闪烁。

  2. 弹性盒子对子元素width的影响?

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

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


喜欢 (0)