Как создать горизонтальную прокрутку с помощью css flexbox? - PullRequest
Новая
       8

Как создать горизонтальную прокрутку с помощью css flexbox?

0 голосов
/ 26 сентября 2018

Я хотел бы создать веб-страницу с разделом, который прокручивается по горизонтали с помощью 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>

Ответы [ 3 ]

0 голосов
/ 26 сентября 2018

Не уверен, что использование flex необходимо, так как flex должен помочь избежать ситуации переполнения среди прочего.

Вот очень простой пример без 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>
0 голосов
/ 26 сентября 2018

Если вы добавите минимальную ширину 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>
0 голосов
/ 26 сентября 2018

Я не уверен, что flexbox на самом деле является инструментом для этой работы.Причиной, лежащей в основе flexbox, является то, что ваши элементы от flex до помещаются внутри коробки .Однако вы специально хотите, чтобы они переполняли ваш ящик, а не заполняли доступное пространство в вашем ящике.

С css-tricks.com :

ОсновнойИдея гибкой компоновки заключается в том, чтобы дать контейнеру возможность изменять ширину / высоту своих элементов (и порядок), чтобы наилучшим образом заполнить доступное пространство [...] Гибкий контейнер расширяет элементы для заполнения доступного свободного пространства или сжимает их допредотвратить переполнение.

Возможно, имеет смысл включить горизонтальную прокрутку с помощью макета на основе 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...