CSS Studio
Interactive Learning
flex-wrap: nowrap keeps every item on one line, so extra items overflow instead of wrapping. align-content only does something after items wrap onto more than one line. A fixed cross size on an item blocks align-items: stretch.
Flexbox
justify-content follows the main axis. align-items follows the cross axis. Column swaps those axes.
What people get wrong
flex-wrap: nowrap keeps every item on one line, so extra items overflow instead of wrapping. align-content only does something after items wrap onto more than one line. A fixed cross size on an item blocks align-items: stretch.
- What is the difference between justify-content and align-items?
- justify-content places items along the main axis. align-items places them along the cross axis. In a row, the main axis is horizontal. In a column, the main axis is vertical.
- Why are my flex items not wrapping?
- The default is flex-wrap: nowrap. Set it to wrap. If there is only one line, align-content has nothing to distribute.
Container Properties
Main axis is horizontal. justify-content moves items left and right. align-items moves them up and down.
Item 2
Click a box in the preview. Grow and shrink change that item only. A fixed cross size blocks stretch.