HTML & CSS
/Intermediate
justify-content
Definition
A flexbox container property that defines how space is distributed between and around content items along the main-axis (horizontal by default).
Explain Like I'm New
If you have 3 buttons in a row, and a bunch of empty space at the end, what do you do with the space? `justify-content` answers that. You can pack the buttons to the left (`flex-start`), pack them to the right (`flex-end`), center them (`center`), or put equal space between them (`space-between`).
Real World Example
A Header. You have a Logo on the far left, and a Login button on the far right. You put them in a flex container and use `justify-content: space-between`. They instantly push to opposite sides of the screen.
Common Use Cases
- •Centering elements horizontally
- •Pushing elements to opposite sides of a container
Interactive Example
Interview Questions
basic
- What value pushes items to the far right of the container?
intermediate
- What is the difference between `space-between` and `space-around`?