我想创建一个网页,该网页的一部分使用flexbox进行水平滚动。但是,该代码导致每个框的尺寸减小到适合屏幕大小,而不是溢出并允许水平滚动。
代码:
.main {
flex-direction: row;
-webkit-flex-direction: row;
overflow: scroll;
width: 100%;
height: 100vh;
}
.portfolio_item {
width: 50%;
}
.flex {
display: flex !important;
display: -webkit-flex !important;
}
<div class="main flex">
<div class="portfolio_item willow">
<a class="link" href="https://aubergewillowinn.com/">
<div class="filter flex">
<h3 class="portfolio_item-text">Willow Inn</h3>
</div>
</a>
</div>
<div class="portfolio_item bellevue">
<a class="link" href="http://www.bellevuemtl.com/">
<div class="filter flex">
<h3 class="portfolio_item-text">Bellevue Condominiums</h3>
</div>
</a>
</div>
<div class="portfolio_item willow">
<a class="link" href="https://aubergewillowinn.com/">
<div class="filter flex">
<h3 class="portfolio_item-text">Willow Inn</h3>
</div>
</a>
</div>
<div class="portfolio_item bellevue">
<a class="link" href="http://www.bellevuemtl.com/">
<div class="filter flex">
<h3 class="portfolio_item-text">Bellevue Condominiums</h3>
</div>
</a>
</div>
</div>
答案 0 :(得分:2)
我不确定flexbox实际上是这项工作的工具。 flexbox的前提是您的元素 flex 要放入框内。但是,您特别希望他们溢出您的盒子,而不是填充盒子中的可用空间。
flex布局的主要思想是使容器能够更改其项目的宽度/高度(和顺序)以最佳地填充可用空间[...] flex容器可以扩展项目以填充可用空间,或缩小它们以防止溢出。
使用像这样的基于inline-block
和white-space: nowrap
的布局来启用水平滚动可能更有意义:
.main {
overflow-x: auto;
white-space: nowrap;
}
.portfolio_item {
display: inline-block;
margin: 0 30px;
}
<div class="main">
<div class="portfolio_item willow">
<a class="link" href="https://aubergewillowinn.com/">
<div class="filter flex">
<h3 class="portfolio_item-text">Willow Inn</h3>
</div>
</a>
</div>
<div class="portfolio_item bellevue">
<a class="link" href="http://www.bellevuemtl.com/">
<div class="filter flex">
<h3 class="portfolio_item-text">Bellevue Condominiums</h3>
</div>
</a>
</div>
<div class="portfolio_item willow">
<a class="link" href="https://aubergewillowinn.com/">
<div class="filter flex">
<h3 class="portfolio_item-text">Willow Inn</h3>
</div>
</a>
</div>
<div class="portfolio_item bellevue">
<a class="link" href="http://www.bellevuemtl.com/">
<div class="filter flex">
<h3 class="portfolio_item-text">Bellevue Condominiums</h3>
</div>
</a>
</div>
</div>
答案 1 :(得分:1)
不确定是否需要使用flex,因为flex可以避免发生溢出等情况。
Here is a very simple example without flexbox利用overflow-x: scroll;
和white-space: nowrap;
属性。第一个允许div滚动,第二个防止空白环绕到新行
.container {
overflow-x: scroll;
white-space: nowrap;
}
.box {
display: inline-block;
border: 1px solid black;
margin: 5px;
height: 200px;
width: 200px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<title></title>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
答案 2 :(得分:1)
如果您将最小宽度(最小宽度为50%)和50%(最小宽度)添加到子项目组合项目中,则代码可以正常工作(带有溢出和滚动)。
希望这会有所帮助
.main {
flex-direction: row;
-webkit-flex-direction: row;
overflow: scroll;
width: 100%;
height: 100vh;
}
.portfolio_item {
min-width: 50%;
width:50%;
}
.flex {
display: flex;
display: -webkit-flex;
}
<div class="main flex">
<div class="portfolio_item willow">
<a class="link" href="https://aubergewillowinn.com/">
<div class="filter flex">
<h3 class="portfolio_item-text">Willow Inn</h3>
</div>
</a>
</div>
<div class="portfolio_item bellevue">
<a class="link" href="http://www.bellevuemtl.com/">
<div class="filter flex">
<h3 class="portfolio_item-text">Bellevue Condominiums</h3>
</div>
</a>
</div>
<div class="portfolio_item willow">
<a class="link" href="https://aubergewillowinn.com/">
<div class="filter flex">
<h3 class="portfolio_item-text">Willow Inn</h3>
</div>
</a>
</div>
<div class="portfolio_item bellevue">
<a class="link" href="http://www.bellevuemtl.com/">
<div class="filter flex">
<h3 class="portfolio_item-text">Bellevue Condominiums</h3>
</div>
</a>
</div>
</div>