Question 1

What is the difference between Flexbox and Grid?

Accepted Answer

Flexbox is for one-dimensional layouts (a single row OR column). Grid is for two-dimensional layouts (rows AND columns simultaneously). Use Flexbox for navigation bars, card rows, and centering. Use Grid for page layouts and complex 2D arrangements.

Question 2

How do I center something vertically and horizontally with Flexbox?

Accepted Answer

Set the container to display: flex; justify-content: center; align-items: center; and give it a height (e.g., min-height: 100vh). This centers the child both horizontally and vertically.

Question 3

What does flex: 1 mean?

Accepted Answer

flex: 1 is shorthand for flex-grow: 1; flex-shrink: 1; flex-basis: 0%. It means the item will grow to fill available space equally with other flex: 1 items, and its initial size is 0 before growing.

Command	Description
display: flex	Create a flex container (block-level)
display: inline-flex	Create an inline flex container
flex-direction: row	Main axis is horizontal, left to right (default)
flex-direction: column	Main axis is vertical, top to bottom
flex-direction: row-reverse	Main axis is horizontal, right to left
flex-wrap: wrap	Allow items to wrap to the next line
flex-wrap: nowrap	All items on one line (default, may overflow)
justify-content: flex-start	Pack items at the start of the main axis (default)
justify-content: center	Center items along the main axis
justify-content: space-between	Equal space between items, no space at edges
justify-content: space-around	Equal space around each item
justify-content: space-evenly	Equal space between and around items
align-items: stretch	Stretch items to fill the cross axis (default)
align-items: center	Center items on the cross axis
align-items: flex-start	Align items at the start of the cross axis
gap: 1rem	Set space between flex items (row and column) `gap: 16px or gap: 1rem 2rem`

Command	Description
flex-grow: 1	Allow item to grow to fill available space
flex-shrink: 0	Prevent item from shrinking below its base size
flex-basis: 200px	Set initial size before growing/shrinking
align-self: center	Override align-items for a single item

CSS Flexbox Cheatsheet

Container

Items

Frequently Asked Questions

More Cheatsheets