固定宽度的非包装CSS Flex
我正在构建一个Carousel类型的组件,但在上手时有些困难恰到好处。固定宽度的非包装CSS Flex
我的基本方法是一个包含大量其他div(项目)的div(包装器)。我想在任何时候在转盘上显示4个项目。这些项目有不同的内容高度,但项目的高度应该相等(达到最大要求)。
我无法解决我需要使CSS正常工作的CSS组合。
使用this setup(HTML + CSS在文章底部),将忽略每个item-container
上的width: 25%;
。
如果我添加一个固定的.item
,那么25%会踢,但项目宽度是未知的 - 这取决于浏览器的大小。将它设置为1000px意味着你会丢失该内容。设置为〜210px的作品,但是当你开始缩小浏览器时,你会失去内容。在大型浏览器上,您的间距过大。奇怪的是,如果我将flex-wrap: wrap
添加到CSS,那么25%的宽度正确应用 - 但我不能这样做,因为那样它就不是轮播! Example
的方案是简单: 与overflow: auto
在一个div项,它们是相等的高度应显示,与孩子的4格在任一个时刻在屏幕上的一个未知量。
<div id="container">
<div id="wrapper">
<div class="item-container">
<div class="item">
<p>
Carousel Item #1 with some quite long text.
</p>
</div>
</div>
<div class="item-container">
<div class="item">
<p>
Carousel Item #2.
</p>
</div>
</div>
<div class="item-container">
<div class="item">
<p>
Carousel Item #3.
</p>
</div>
</div>
...
</div>
</div>
我的CSS:
#container {
width: 100%;
background: #0f0;
overflow: auto;
}
#wrapper {
display: flex;
}
.item-container {
border: 1px solid #f00;
width: 25%;
}
注意,这是我的MCVE
我的HTML结构如下。在我的真实组件上,我有左右滚动的按钮,内容显得更加复杂,并且像这样。
您只需要将flex: 0 0 auto
添加到.item-container
元素即可。
* {
box-sizing: border-box;
}
#container {
width: 100%;
background: #0f0;
overflow: auto;
}
#wrapper {
display: flex;
}
.item-container {
border: 1px solid #f00;
flex: 0 0 auto;
width: 25%;
}
<div id="container">
<div id="wrapper">
<div class="item-container">
<div class="item">
<p>
Carousel Item #1 with some quite long text.
</p>
</div>
</div>
<div class="item-container">
<div class="item">
<p>
Carousel Item #2.
</p>
</div>
</div>
<div class="item-container">
<div class="item">
<p>
Carousel Item #3.
</p>
</div>
</div>
<div class="item-container">
<div class="item">
<p>
Carousel Item #4.
</p>
</div>
</div>
<div class="item-container">
<div class="item">
<p>
Carousel Item #5.
</p>
</div>
</div>
<div class="item-container">
<div class="item">
<p>
Carousel Item #6.
</p>
</div>
</div>
<div class="item-container">
<div class="item">
<p>
Carousel Item #7.
</p>
</div>
</div>
</div>
</div>
我已经与此战斗了几个小时,谢谢。我缺少的具体属性是'flex-shrink:0'。其他('flex-basis:auto; flex-grow:0;')是默认值。 –
@Pete是的,我用JS来处理滚动按钮 - 旋转木马的工作原理在非JS浏览器太虽然,通过链接到当前页面,并添加索引的查询字符串 - 这是分析服务器端和印章,并根据需要更改内容:) –