我是HTML CSS的新手。我正在尝试制作一个网站。我正在尝试创建一个图像滑块。在设置display: flex
时,即使给出了flex-grow
,伸缩也会收缩吗?
为此,我拿了一个div容器(类名是content),在里面我拿了另外3个div容器(类名是inner-content)。在为这3个容器设置css属性后,如果我在外部div容器上设置display:flex
,则伸缩会收缩。我不要我尝试了flex-basis
,但是不起作用?
/ =======应用display:flex之前的图片; === /
/ =======应用display:flex后的图片; === /
.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>