我的目标是使用 Flexbox 实现一个具有给定宽度的 slider ,并且可以随着元素(图像)添加到其中而增长,直到达到特定宽度。达到该宽度后,我想在 x 轴上显示一个滚动条。我还希望 slider 不要缩小到最小宽度以下。
这是我尝试过的:
HTML:
<div class="wrapper">
<div class="thisDivAllowsSliderToGrowToMaxWidth">
<div class="slider">
<div class="image"></div>
...
</div>
</div>
</div>
CSS:
.wrapper {
height: 400px;
display: flex;
justify-content: center;
align-items:center
}
.slider {
display:flex;
justify-content:flex-start;
height:100px;
flex-basis: 250px;
min-width:200px;
max-width:350px;
overflow-x:auto;
}
.image {
flex-shrink:0;
height:100px;
width:50px;
}
弹出的问题是,一旦将overflow-x添加到 slider ,它就不再增长,而是在达到flex-basis宽度时显示滚动条。
有趣的是,在 slider 周围添加一个简单的包裹 div (.thisDivAllowsSliderToGrowToMaxWidth) 以某种方式解决了这个问题。您可以找到示例 here 。
任何人都可以回答为什么会发生这种情况以及我是否按预期使用了 flex 属性?
最佳答案
要使 Flex 容器根据 Flex 元素的宽度增长,可以将 flex-basis
设置为 content
内容
将根据 flex 元素的内容自动调整大小
$(".add-slide").on("click",function(){
$(".slider").append('<div class="image"></div>');
});
.wrapper {
height: 300px;
border :1px solid red;
display: flex;
justify-content: center;
align-items:center
}
.slider {
display:flex;
border: 1px solid black;
height:100px;
flex-basis: content;
min-width:200px;
max-width:350px;
overflow-x:auto;
overflow-y:hidden;
}
.image {
flex-shrink: 0;
border: 1px solid green;
height:100px;
width:50px;
}
button {
margin-bottom: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="add-slide">add slide</button>
<div class="wrapper">
<div class="slider">
<div class="image"></div>
</div>
</div>
关于html - 与 flex-basis 和 min 和 max-width 溢出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47931317/