Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS3 Flexbox Webkit, column flow and horizontal scrolling

CSS3 Flexbox Webkit, column flow and horizontal scrolling

Problem

I have the following list:

  • abc
  • def
  • ghi
  • jkl
  • mno
  • pqr
  • stu
  • vwx
  • yz0
  • 123
  • 456
  • 789

With styles

ul { display: -webkit-flex; width: 800px; height: 600px; overflow-x: scroll; -webkit-flex-direction: column; }
ul li { width: 400px; height: 200px; }

Assuming the parent container is a fixed size of 800px x 600px, I would like the content to flow vertically, then horizontally so that the final layout would be:

abc  jkl  stu  123
def  mno  vwx  456
ghi  pqr  yz0  789

How do I achieve this with (webkit) flexbox? I can't seem to get the list items to flow once the third list item reaches the bottom of the parent container. Please note that I would like horizontal scrolling as the number of items in the list is indeterminate.

Problem courtesy of: romiem

Solution

Found the answer - I needed to use the -webkit-flex-flow property.

ul { display: -webkit-flex; width: 800px; height: 600px; overflow-x: scroll; -webkit-flex-flow: column wrap; }
ul li { width: 400px; height: 200px; }
Solution courtesy of: romiem

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS3 Flexbox Webkit, column flow and horizontal scrolling

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×