What Are The Default Values for Justify-Content & Align Content

What is the default value of justify content?

You should pay attention because justify-content is defined in two different specifications and the trick is here.

The first specifciation is this one: https://drafts.csswg.org/css-align-3/#propdef-justify-content which is a draft one. The purpose of this specification is to allow us to align all kind of elements using the same properties:

CSS Levels 1 and 2 allowed for the alignment of text via text-align and the alignment of blocks by balancing auto margins. However, except in table cells, vertical alignment was not possible. As CSS adds further capabilities, the ability to align boxes in various dimensions becomes more critical. This module attempts to create a cohesive and common box alignment model to share among all of CSS.

Inside you will find that justify-content can be used with all the elements and it has indeed a value called normal. The behavior of this value depend on the context where its applied.

For flexbox and CSS grid you will see

normal behaves as stretch.

Also for flexbox you will see

The justify-content property applies along the main axis, but since stretching in the main axis is controlled by flex, stretch behaves as flex-start.

All the above is still in Draft and has no support yet. To find the real values of justify-content you should either see the Flexbox or CSS grid specification.

In the Flexbox one such value doesn't exist:

Name: justify-content
Value: flex-start | flex-end | center | space-between | space-around
Initial: flex-start

Using normal value will either be considered as invalid and the initial value will be used or will be considered as valid and it will fall back to flex-start, the intial value.

In the CSS grid specification they are already linking to the draft one so you can assume all the values exist but you need to pay attention to the browser support of some of them.

Basically the MDN page is combining all the specifications which make it a but confusing.

In the future justify-content will have the following values:

normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ]

<content-distribution> = space-between | space-around | space-evenly | stretch

<overflow-position> = unsafe | safe

<content-position> = center | start | end | flex-start | flex-end

What are the default values for justify-content & align content?

^{To be more accurate, default value is actually called initial value which is the correct word. I will be using both of them in my answer considering that both have exactly the same meaning}

You need to consider the specification to find this and you need to pay attention because there is two specifications defining this.

The first one related to flexbox (the one you have to follow) gives the initial value as flex-start for justify-content and stretch for align-items. This is the Flexbox Level 1 specification and it's widely supported.

The second one is related to future alignment techniques. This specification is still in Draft mode and will define new way to align items in different contexts (Flexbox/Grid/Block/multicol/.. containers). The default value is normal for both properties (justify-content and align-items)

If you continue the reading you can see that normal will fallback to stretch in the flexbox context and for justify-content stretch behave as flex-start

So in all the cases, it's safe to assume that the initial value is flex-start for justify-content since normal will fallback to it (same for align-items where you can consider stretch as default)

In other words, normal is a special keyword (like auto for example) that will have a different behavior based on the context. So we cannot really define what normal will do. We can only do it in a particular context (Flexbox/Grid/Block/multicol/.. containers) and for each property.

You can also use normal without any issue because it will either:

be considered an invalid value (no implementing of the new Specification) and the browser will use the initial one (flex-start or stretch defined in the Flexbox Specification)
or be considered as valid value (the new Specification is implemented, even partially) and will also fallback to previous values.

Example where you will get the same result for all the cases whataver the browser:

.box {  display:inline-flex;  width:200px;  height:200px;  border:1px solid;  justify-content:normal;  align-items:normal;}.not-normal {  justify-content:flex-start;  align-items:stretch;}.initial {  justify-content:initial;  align-items:initial;}.box span {  background:red;  padding:10px;}

<p>using normal</p><div class="box"><span> some text here</span></div><div class="box" style="flex-direction:column;"><span> some text here</span></div><p>using flex-start/stretch</p><div class="box not-normal"><span> some text here</span></div><div class="box not-normal" style="flex-direction:column;"><span> some text here</span></div><p>using initial</p><div class="box not-normal"><span> some text here</span></div><div class="box not-normal" style="flex-direction:column;"><span> some text here</span></div>

In the CSS declaration 'align-content', is there any difference between the values 'normal' and 'stretch'?

These are the definitions on MDN:

align-content: normal: The items are packed in their default position as if no align-content value was set

align-content: stretch: If the combined size of the items along the cross axis is less than the size of the alignment container, any auto-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by max-height/max-width (or equivalent functionality), so that the combined size exactly fills the alignment container along the cross axis.

but i think in the browser the normal and stretch values pretty much work the same way for most cases. the different is that with stretch 'auto'-sized items to fi the container

There is also some good information here and here on CSS_Tricks

Does it make any sense to use `baseline` value with `justify-content`, `justify-items` or `justify-self` in CSS Flex/Grid?

The MDN is not accurate here as there is no baseline for justify-content

If you check the actual Flexbox specification you will see that there is no baseline value for justify-content

Value:  flex-start | flex-end | center | space-between | space-around

In the near future and as defined in the CSS Box Alignment Module Level 3 we will have more generic way to align elements and even there baseline is a not a valid value of justify-content

Value:  normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ]

<content-distribution> = space-between | space-around | space-evenly | stretch

<overflow-position> = unsafe | safe

<content-position> = center | start | end | flex-start | flex-end

By the way, there is baseline for justify-items in the new specificiation: https://drafts.csswg.org/css-align-3/#propdef-justify-items but this property doesn't exist in the actual Flexbox specification (same for justify-self)

Related: In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

align-content doesn't accept baseline with Flexbox (https://drafts.csswg.org/css-flexbox-1/#align-content-property) but it does in the New Specification

The same apply for CSS grid but you can find justify-items and justify-self there: https://www.w3.org/TR/css-grid-1/#row-align

Actually I don't have a clear example to illustrate the baseline with those properties but I am pretty sure in most of the case it will consider a fallback value as defined in the Spec:

Is there a way to have different justify-content values for different rows inside a flexbox-container?

The answer is no.

In grid, there is the justify-self property in which this would be true. However, in flex there is no support for this style as of May 2022.

flex does support align-self for aligning flex item's on the y-axis (align-items), but not for the x-axis (justify-content).

The good news.

You can still replicate these styles in your stylesheet but they will have to be done manually. You can target the first and second flex-item and use width: calc(100%/2) for the first two flex items that you want to each take 50%. Then you can add flex-wrap: wrap on to your flex-container so the image flex-items wrap onto a new row. Then you can replicate justify-content: space-between; by adding margin: auto; to those respective flex-items.

See below:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-item:first-child,
.flex-item:nth-child(2) {
  width: calc(100%/2);
  outline: dotted 1px black;
}

.flex-item:nth-child(3),
.flex-item:nth-child(4),
.flex-item:nth-child(5) {
  outline: solid 1px;
  background: orange;
  padding: 10px;
}

<div class="wrapper flex-container">
  <div class="flex-item">
    <h2>Text</h2>
    <p>Text</p>
  </div>
  <div class="flex-item">
    <h2>Text</h2>
    <p>Text</p>
  </div>
  <figure class="flex-item" style="margin-right: auto;"><img src="https://dummyimage.com/100/000/fff" alt="junckers"></figure>
  <figure class="flex-item" style="margin: auto;"><img src="https://dummyimage.com/100/000/fff" alt="byg-garanti"></figure>
  <figure class="flex-item" style="margin-left: auto;"><img src="https://dummyimage.com/100/000/fff" alt="gulvbranchen"></figure>
</div>

justify content won't align left

If both of your items inside the container are each 50% width, they won't move horizontally—they're spanning across the entire container; there's no free space (and justify-content works by distributing free space).

Remove the width: 50% rule and work on each item individually (using width, margin and/or flex properties).

Also, the justify-content property doesn't take left and right values. They're invalid. Here are the values that work.

Finally, when you're ready to pin both items to the left, consider flex auto margins.