我是HTML CSS的新手。我正在尝试制作一个网站。我正在尝试创建一个图像滑块。在设置display: flex时,即使给出了flex-grow,伸缩也会收缩吗?

为此,我拿了一个div容器(类名是content),在里面我拿了另外3个div容器(类名是inner-content)。在为这3个容器设置css属性后,如果我在外部div容器上设置display:flex,则伸缩会收缩。我不要我尝试了flex-basis,但是不起作用?

/ =======应用display:flex之前的图片; === /
html - 我正在尝试创建图像滑块。即使设置了flex-grow,在设置显示flex时,flex-shrinks还是可以的?-LMLPHP

/ =======应用display:flex后的图片; === /
html - 我正在尝试创建图像滑块。即使设置了flex-grow,在设置显示flex时,flex-shrinks还是可以的?-LMLPHP



.content{
margin-top: 10px;
display:flex;
height:85vh;
background: yellow;
width: 100%;
/* overflow: hidden; */
padding:0px;
}
.inner-content{
    padding:75px 50px 0px;
    display:flex;
    margin: auto;
    border: 1px solid black;
}
.cont{
    flex:1.5;
    padding:90px 0px 0px 50px;
    background: chocolate;
}
.cont h3{
    font-size:30px;
    padding-bottom: 10px;
    letter-spacing: 1px;
    text-shadow: 1px 0px black;
}
.cont p{
    font-size:20px;
    padding-bottom: 10px;

}
.cont button{
    width:150px;
    margin:auto;
    height:11%;
    margin-top:10px;
    font-size:18px;
    border:2px solid #072085;
    color:#072085;
    background: white;
    border-radius:20px;
    text-align: center;
}
.image-container{
    align-items: center;
    z-index: 1;
    flex:1;
}
.image-container img{
    max-width: 300px;
    height: auto;
    margin:0 auto;
    animation:drop 1.5s ease;
    z-index: 1;
}

<link href="https://fonts.googleapis.com/css?family=Poppins:400,500&display=swap" rel="stylesheet">

<div class="main-page">
        <div class="content">
            <div class="inner-content">
                <div class="cont">
                    <h3>Redmi Note 8</h3>
                    <p>48MP AI rear camera with Sony IMX586 camera sensor</p>
                    <button href="#">BUY NOW</button>
                </div>
                <div class="image-container">
                    <img src="1.png"/>
                </div>
            </div>
            <!----2nd-->
            <div class="inner-content">
                <div class="cont">
                    <h3>Redmi Note 8</h3>
                    <p>48MP AI rear camera with Sony IMX586 camera sensor</p>
                    <button href="#">BUY NOW</button>
                </div>
                <div class="image-container">
                    <img src="1.png"/>
                </div>
            </div>
            <!----3rd-->
            <div class="inner-content">
                <div class="cont">
                    <h3>Redmi Note 8</h3>
                    <p>48MP AI rear camera with Sony IMX586 camera sensor</p>
                    <button href="#">BUY NOW</button>
                </div>
                <div class="image-container">
                    <img src="1.png"/>
                </div>
            </div>
        </div>
    </div>

最佳答案

您需要给inner-content指定最小宽度。运行该代码段并签入整页。

我假设您知道如何实现滑块功能。



.content{
  margin-top: 10px;
  display:flex;
  background: yellow;
  width: 100%;
  padding:0px;
  overflow-x: scroll;
}

.inner-content{
    padding:75px 50px 0px;
    display: flex;
    flex: 1;
    border: 1px solid black;
    min-width: 90vw;
}

.cont{
    padding:90px 0px 0px 50px;
    background: chocolate;
}

.cont h3{
    font-size:30px;
    padding-bottom: 10px;
    letter-spacing: 1px;
    text-shadow: 1px 0px black;
}
.cont p{
    font-size:20px;
    padding-bottom: 10px;

}
.cont button{
    width:150px;
    margin:auto;
    height:11%;
    margin-top:10px;
    font-size:18px;
    border:2px solid #072085;
    color:#072085;
    background: white;
    border-radius:20px;
    text-align: center;
}
.image-container{
    align-items: center;
    z-index: 1;
    flex:1;
}
.image-container img{
    max-width: 300px;
    height: auto;
    margin:0 auto;
    animation:drop 1.5s ease;
    z-index: 1;
}

<link href="https://fonts.googleapis.com/css?family=Poppins:400,500&display=swap" rel="stylesheet">

<div class="main-page">
        <div class="content">
            <div class="inner-content">
                <div class="cont">
                    <h3>Redmi Note 8</h3>
                    <p>48MP AI rear camera with Sony IMX586 camera sensor</p>
                    <button href="#">BUY NOW</button>
                </div>
                <div class="image-container">
                    <img src="https://static.toiimg.com/thumb/msid-70348099,width-320,resizemode-4,imgv-5/Xiaomi-Redmi-Note-8-Pro.jpg"/>
                </div>
            </div>
            <!----2nd-->
            <div class="inner-content">
                <div class="cont">
                    <h3>Redmi Note 8</h3>
                    <p>48MP AI rear camera with Sony IMX586 camera sensor</p>
                    <button href="#">BUY NOW</button>
                </div>
                <div class="image-container">
                    <img src="https://static.toiimg.com/thumb/msid-70348099,width-320,resizemode-4,imgv-5/Xiaomi-Redmi-Note-8-Pro.jpg"/>
                </div>
            </div>
            <!----3rd-->
            <div class="inner-content">
                <div class="cont">
                    <h3>Redmi Note 8</h3>
                    <p>48MP AI rear camera with Sony IMX586 camera sensor</p>
                    <button href="#">BUY NOW</button>
                </div>
                <div class="image-container">
                    <img src="https://static.toiimg.com/thumb/msid-70348099,width-320,resizemode-4,imgv-5/Xiaomi-Redmi-Note-8-Pro.jpg"/>
                </div>
            </div>
        </div>
    </div>

10-05 20:50
查看更多