Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

css
communitycreator

What is the CSS justify-content Property?

Kedar Kodgire

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

The justify-content property aligns the entities in the containers when they do not utilize all available space on the horizontal axis. It is a sub-property of Flexible Box Layout. There are multiple values for this property, as shown below.

The syntax is as follows:

justify-content: flex-start|flex-end|center|space-between|
space-around|space-evenly|initial|inherit;

.container{
        display: flex;
        justify-content: flex-start;
}

Let’s look at the examples for each of these.

Note: For the demo presented below, you can see and play around with the HTML and CSS code by clicking on the respective tabs.

Explanation

Consider a container and three divs within it. Each has a height and width of 80px. We present this container as flex using the display property, i.e., display: flex and change the justify-content property values.

  1. flex-start: The container adjusts the items to their start (left). The justify-content property takes this by default, when the value is not specified.

  2. flex-end: Here, items are arranged to the end (right) of the container.

  3. center: Aligns all the blocks to the center of the container.

  4. space-between: The blocks will have space between them.

  5. space-around: This is similar to the space-between, but some space will separate the rightmost block from the end of the container and the leftmost block from the beginning of the container.

  6. space-evenly: It will place all the blocks with equal spaces towards the left and right.

  7. initial: This will set the property’s default value i.e., flex-start.

  8. inherit: This is used when you want the same property as the parent container.

RELATED TAGS

css
communitycreator

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring