Question

我想创建一个网页，该网页的一部分使用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>

Answer 1

我不确定flexbox实际上是这项工作的工具。 flexbox的前提是您的元素 flex 要放入框内。但是，您特别希望他们溢出您的盒子，而不是填充盒子中的可用空间。

From css-tricks.com：

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>

Answer 2

不确定是否需要使用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>

Answer 3

如果您将最小宽度（最小宽度为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>

如何使用CSS Flexbox创建水平滚动？

3 个答案: