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:
In CSS Flexbox, why are there no justify-items and justify-self properties?
Methods for Aligning Flex Items along the Main Axis
As stated in the question:
To align flex items along the main axis there is one property:
justify-content
To align flex items along the cross axis there are three properties:
align-content
,align-items
andalign-self
.
The question then asks:
Why are there no
justify-items
andjustify-self
properties?
One answer may be: Because they're not necessary.
The flexbox specification provides two methods for aligning flex items along the main axis:
- The
justify-content
keyword property, and auto
margins
justify-content
The justify-content
property aligns flex items along the main axis of the flex container.
It is applied to the flex container but only affects flex items.
There are five alignment options:
flex-start
~ Flex items are packed toward the start of the line.flex-end
~ Flex items are packed toward the end of the line.center
~ Flex items are packed toward the center of the line.space-between
~ Flex items are evenly spaced, with the first item aligned to one edge of the container and the last item aligned to the opposite edge. The edges used by the first and last items depends onflex-direction
and writing mode (ltr
orrtl
).space-around
~ Same asspace-between
except with half-size spaces on both ends.
Auto Margins
With auto
margins, flex items can be centered, spaced away or packed into sub-groups.
Unlike justify-content
, which is applied to the flex container, auto
margins go on flex items.
They work by consuming all free space in the specified direction.
Align group of flex items to the right, but first item to the left
Scenario from the question:
making a group of flex items align-right (
justify-content: flex-end
)
but have the first item align left (justify-self: flex-start
)Consider a header section with a group of nav items and a logo. With
justify-self
the logo could be aligned left while the nav items stay
far right, and the whole thing adjusts smoothly ("flexes") to
different screen sizes.
Other useful scenarios:
Place a flex item in the corner
Scenario from the question:
- placing a flex item in a corner
.box { align-self: flex-end; justify-self: flex-end; }
Center a flex item vertically and horizontally
margin: auto
is an alternative to justify-content: center
and align-items: center
.
Instead of this code on the flex container:
.container {
justify-content: center;
align-items: center;
}
You can use this on the flex item:
.box56 {
margin: auto;
}
This alternative is useful when centering a flex item that overflows the container.
Center a flex item, and center a second flex item between the first and the edge
A flex container aligns flex items by distributing free space.
Hence, in order to create equal balance, so that a middle item can be centered in the container with a single item alongside, a counterbalance must be introduced.
In the examples below, invisible third flex items (boxes 61 & 68) are introduced to balance out the "real" items (box 63 & 66).
Of course, this method is nothing great in terms of semantics.
Alternatively, you can use a pseudo-element instead of an actual DOM element. Or you can use absolute positioning. All three methods are covered here: Center and bottom-align flex items
NOTE: The examples above will only work – in terms of true centering – when the outermost items are equal height/width. When flex items are different lengths, see next example.
Center a flex item when adjacent items vary in size
Scenario from the question:
in a row of three flex items, affix the middle item to the center of the container (
justify-content: center
) and align the adjacent
items to the container edges (justify-self: flex-start
and
justify-self: flex-end
).Note that values
space-around
andspace-between
onjustify-content
property will not keep the middle item centered in relation to the container if the adjacent items have different widths (see demo).
As noted, unless all flex items are of equal width or height (depending on flex-direction
), the middle item cannot be truly centered. This problem makes a strong case for a justify-self
property (designed to handle the task, of course).
#container {
display: flex;
justify-content: space-between;
background-color: lightyellow;
}
.box {
height: 50px;
width: 75px;
background-color: springgreen;
}
.box1 {
width: 100px;
}
.box3 {
width: 200px;
}
#center {
text-align: center;
margin-bottom: 5px;
}
#center > span {
background-color: aqua;
padding: 2px;
}
<div id="center">
<span>TRUE CENTER</span>
</div>
<div id="container">
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
</div>
<p>The middle box will be truly centered only if adjacent boxes are equal width.</p>
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
orstretch
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>
I'm unable to override justify-content
I think you are confusing justify-content with align-items.
The justify-content
property aligns the flexible container's items when the items do not use all available space on the main-axis (horizontally).
https://www.w3schools.com/cssref/css3_pr_justify-content.asp
The align-items property specifies the default alignment for items inside the flexible container.
https://www.w3schools.com/cssref/css3_pr_align-items.asp
This is how I think you should use it.
.flex-container {
display:grid;
}
.flex-container div {
display:flex;
height:50px;
align-items:center;
justify-content: center;
}
.flex-container div.baseline {
align-items:flex-start;
}
<div class="flex-container">
<div>1</div>
<div class="baseline">2</div>
<div>3</div>
</div>
Related Topics
How to Force Firefox to Render Textarea Padding the Same as in a Div
How to Create Custom Tooltips with CSS Pseudoelements
Css: Height- Fill Out Rest of Div
Dynamic Variable Names in Less CSS
How to Revert Back to Normal After Display:None for Table Row
How to Make Background-Image with Linear-Gradient Work on Ie 11
How to Make Ie Support Min-Width/Max-Width CSS Properties
Css, Change Less Variable with @Media
CSS - CSS Coding That I Have Never Seen
Applying Webkit Transitions to Pseudo Elements
Webkit Linear Gradient Stops Render Incorrectly
How to Use Skew Only in the Parent Element
Concatenate String in Less in Loop
How to Overwrite CSS Variable with Its Own Value
Z-Index Between Children and Parents