html
/

CSS Flexbox

Last Sync: Today

On this page

14
0%
5 min read
Remaining
5 minleft

Click any section to jump — progress syncs automatically

html

CSS Flexbox

What is Flexbox?

Flexbox is a one-dimensional layout system used to arrange elements in rows or columns with flexible sizing and alignment.

Flex Container

CSSRead-only
1
.container {
  display: flex;
}

Flex Direction

CSSRead-only
1
.container {
  flex-direction: row; /* row | column */
}

Justify Content (Main Axis)

CSSRead-only
1
.container {
  justify-content: center; /* flex-start | flex-end | space-between */
}

Align Items (Cross Axis)

CSSRead-only
1
.container {
  align-items: center; /* flex-start | flex-end | stretch */
}

Flex Wrap

CSSRead-only
1
.container {
  flex-wrap: wrap;
}

Gap (Spacing)

CSSRead-only
1
.container {
  gap: 10px;
}

Flex Items

CSSRead-only
1
.item {
  flex: 1; /* grow shrink basis */
}

Align Self

CSSRead-only
1
.item {
  align-self: flex-end;
}

Flex Properties Overview

PropertyDescription
display: flexDefines flex container
flex-directionRow or column layout
justify-contentAlign horizontally
align-itemsAlign vertically
flex-wrapWrap items
gapSpacing between items

Example Layout

CSSRead-only
1
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Best Practices

  • Use flex for one-dimensional layouts
  • Use gap instead of margins for spacing
  • Combine justify and align for centering
  • Keep layout simple and readable

Common Mistakes

  • Confusing main axis vs cross axis
  • Overusing flex unnecessarily
  • Not using flex-wrap when needed
  • Misunderstanding flex values

Conclusion

Flexbox is a powerful layout tool for building responsive designs. Mastering it simplifies alignment and spacing.

Try it yourself

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Test Your Knowledge

Q1
of 3

Which enables flexbox?

A
display: block
B
display: flex
C
display: grid
D
display: inline
Q2
of 3

Which aligns horizontally?

A
align-items
B
justify-content
C
flex-wrap
D
gap
Q3
of 3

Which controls direction?

A
flex-direction
B
align-items
C
justify-content
D
flex-wrap

Frequently Asked Questions

What is flexbox?

A layout system for arranging items in a row or column.

What is justify-content?

Aligns items along main axis.

What is align-items?

Aligns items along cross axis.

Previous

css z index

Next

css grid

Related Content

Need help?

Explore our comprehensive docs or start a chat with our tech experts.