CODEWITHSUNDEEP
htmlcssflexboxword-wrap
Rahul Gupta
Rahul Gupta

Reputation: 91

flex wrap for columns

With flex-direction: column, how can one layout content to wrap from one column to the next rather than stretching (and scrolling along) the same column.

I tried the following, for example, without success: 

{
 flex-direction:column;
 flex-wrap:wrap;
}

In the following pen I would like the number that do not fit in the screen in column 1 to move to column 2 and so on and scroll to occur in the x direction only in case all columns get filled.

http://codepen.io/anon/pen/epPeoG,

Upvotes: 1

Views: 874

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 371003

For flex items to wrap in a column-based flex container you need to define a height for the container. Whether the height is pixels, percentage, or viewport-based doesn't matter. The flexbox just needs to know where to end the column.

Here's your codepen, modified (wrapping is based on viewport height): http://codepen.io/anon/pen/PPyEzZ

CSS

.flex-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100vh;
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;  
}

Upvotes: 1

Will
Will

Reputation: 20235

You could use display: inline-flex; instead of display: flex;. Then the columns won't stretch to the full width. See this fiddle.

Upvotes: 2

Related Questions