Make flex items wrap in a column-direction container

Question

So, to wrap elements in a flex div using a row layout all I have to do is this:

div {
  display: flex;
  flex-direction: row;  /* I want to change this to column */
  flex-wrap: wrap;      /* wrap doesn't seem to work on column, only row */
}

<div>
  <p>these</p>
  <p>will</p>
  <p>wrap</p>
</div>

This works for my rows, but I want to make it work for my columns as well.

I tried just changing flex-direction to column, but it doesn't seem to be working. Does anyone know how to get this functionality?

Row works as is, and when the items reach the width of the viewport/container it wraps, but for column, and since the viewport does not have a height (default is `auto`), it will just continue to grow, so for it to actually wrap, it needs a set height. — Asons, May 07 '17 at 16:58
Ah, you are very wise. I had the height set on my parent element, but not directly on my flex-box. I just set it to inherit and voila! It works! Thanks a lot! Does that mean that the viewport only keeps track of width and not height? — Frank, May 07 '17 at 17:00
Yes, a page's normal flow is downwards, hence it will simply start scroll when content gets to big, with sideways it does not — Asons, May 07 '17 at 17:02
very nice. However, now my flex-box div is not containing the new columns that are made when my content wraps. the flex-box div only has a width which contains the first column. Is there any way to make my flex-box expand to contain its contents? — Frank, May 07 '17 at 17:04
May I link to this post, it has a lot about all this: http://stackoverflow.com/questions/33891709/when-flexbox-items-wrap-in-column-mode-container-does-not-grow-its-width — Asons, May 07 '17 at 17:06
Also, generally, giving the flex items `flex: 1` will make them fill the remaining space, either horizontally for flex row, or vertical for flex column — Asons, May 07 '17 at 17:08
That is a useful link. I found this post as well indicating that the column flex model is broken in that container width will not expand to contain wrapped children. http://stackoverflow.com/questions/23408539/how-can-i-make-a-displayflex-container-expand-horizontally-with-its-wrapped-con I will try setting the flex property to 1 and see what happens. — Frank, May 07 '17 at 17:10
setting `flex:1` did the trick! Thank you! You saved me a lot of time! If you post an answer, I'll accept it! — Frank, May 07 '17 at 17:12
There is a lot answers already covering this, and the one given by Michael_B's is more _correct_, so go for that and the `flex: 1` is on me :) — Asons, May 07 '17 at 17:15

Michael Benjamin · Accepted Answer · 2017-11-04T16:43:24.727

Block-level elements, by default, take up the full width of their containing block. This, in effect, resolves to width: 100%, which sets a break in the flow of content in the horizontal direction.

So, flex items can wrap by default in a row-direction container.

Nothing in HTML or CSS, however, sets a default height on block-level elements. Heights are content-driven (height: auto).

This means that elements will flow vertically without having any reason to break.

(I guess somewhere along the line of evolution, possibly on the basis of usability studies, it was decided that it would be okay for web applications to expand vertically, but not horizontally.)

That's why flexbox doesn't automatically wrap items in column direction. It requires an author-defined height to serve as a breaking point.

Often times, however, a layout's height is dynamic so a specific height cannot be set. That makes flexbox unusable for wrapping items in column direction. A great alternative is CSS Grid Layout, which doesn't require a height setting on the container:

div {
  display: grid;
  grid-gap: 10px;
}

p:nth-child(3n + 1) {
  grid-row: 1;
  background-color: aqua;
}

p:nth-child(3n + 2) {
  grid-row: 2;
  background-color: orange;
}

p:nth-child(3n + 3) {
  grid-row: 3;
  background-color: lightgreen;
}

p {
  margin: 0;
  padding: 10px;
}

<div>
  <p>ONE</p>
  <p>TWO</p>
  <p>THREE</p>
  <p>FOUR</p>
  <p>FIVE</p>
  <p>SIX</p>
  <p>SEVEN</p>
  <p>EIGHT</p>
  <p>NINE</p>
</div>

Browser Support for CSS Grid

Chrome - full support as of March 8, 2017 (version 57)
Firefox - full support as of March 6, 2017 (version 52)
Safari - full support as of March 26, 2017 (version 10.1)
Edge - full support as of October 16, 2017 (version 16)
IE11 - no support for current spec; supports obsolete version

Here's the complete picture: http://caniuse.com/#search=grid

Thank you, I will give it a try. I'm currently using `writing-mode:vertical-lr` and `flex-direction:row` to get past a little bug where the flexbox doesn't grow to fit wrapped content, and I set a height on my flexbox to get the content to wrap. — Frank, May 07 '17 at 20:33

Make flex items wrap in a column-direction container

1 Answers1

Linked