Flexbox - проблема с переменным числом столбцов - PullRequest
Новая
       21

Flexbox - проблема с переменным числом столбцов

0 голосов
/ 30 октября 2018

Я пытаюсь создать адаптивный дизайн, в котором длинный список ссылок расположен в столбцах, количество столбцов зависит от ширины экрана устройства отображения. Насколько я понимаю, я должен указать высоту контейнера, чтобы получить несколько столбцов. Тем не менее, затем столбцы продолжают справа от экрана. Я не знаю длину ссылок. Есть ли способ сделать это через Flexbox? Кажется, что такое очевидное требование.

У меня есть CSS: 

/* Container */
.links {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 100vw !important; 
    height: 90vh;    
 }

/* Links in Container */
.links a {
    white-space: nowrap;
    flex: 1;
    margin: 5px 5px 0 20px;
}

Изменить: это не дубликат, как прокомментировано. Проблема не в том, что ширина контейнера не растет горизонтально. Проблема в том, что он растет горизонтально, а не вертикально.

1 Ответ

0 голосов
/ 24 декабря 2018

Рассматривали ли вы просто использование CSS-столбцов ?

Вам не нужно указывать какую-либо высоту, а затем, по мере изменения ширины экрана, количество столбцов будет корректироваться в зависимости от указанной вами ширины - соответственно, принимая нужную высоту.

Ваш CSS может выглядеть так: 

.links {
  columns: 5 100px; // # of columns | minimum column width
  column-gap: 40px; // space between columns
}

.links > a {
  display: block;
  padding: 10px 5px;
}
<div class="links">
  <a href="#">link1</a>
  <a href="#">link2</a>
  <a href="#">link3</a>
  <a href="#">link4</a>
  <a href="#">link5</a>
  <a href="#">link6</a>
  <a href="#">link7</a>
  <a href="#">link8</a>
  <a href="#">link9</a>
  <a href="#">link10</a>
  <a href="#">link11</a>
  <a href="#">link12</a>
  <a href="#">link13</a>
  <a href="#">link14</a>
  <a href="#">link15</a>
  <a href="#">link16</a>
  <a href="#">link17</a>
  <a href="#">link18</a>
  <a href="#">link19</a>
  <a href="#">link20</a>
</div>

Браузерная поддержка для столбцов довольно хорошая.

Надеюсь, это поможет!

...