Flexbox - Variable Number of Columns Problem

Question

I'm trying to aim for a responsive design wherein a long list of links is arranged in columns, the number of columns varying according to the width of the display device screen. As I understand it, I must specify the height of the container to get multiple columns. However, then the columns continue to the right off the screen. I do not know the length of the links. Is there any way to do this through Flexbox? It seems like such an obvious requirement.

The CSS I have so far is:

/* 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;
}

Edit: this it NOT a duplicate as commented. The problem not that the container width doesn't grow horizontally. The problem is that it DOES grow horizontally, not vertically.

Perhaps you need to demonstrate the issue you are having so that we can see why it's not a duplicate. At the moment, there's not much you can do about it. A **fixed height** is required to force the wrapping. If there isn't one, it won't wrap and you don't get the columns you are after. You may need a JS solution here. — Paulie_D, Oct 30 '18 at 10:56
It would probably help if you included a code snippet that you can run, along with a visual of what's expected, like the other question did. — Ken Kinder, Oct 30 '18 at 16:18

score 1 · Answer 1 · answered Dec 24 '18 at 20:16

Have you considered just using CSS Columns?

You wouldn't need to specify any height and then as the screen width changes, the number of columns will adjust based on the width you specify - taking up whatever height it needs, accordingly.

Your CSS could just look like this:

.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>

Browser support for columns is pretty good.

Hope this helps!

Flexbox - Variable Number of Columns Problem

1 Answers1