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>
flexbox justify-self: flex-end not working?
You could use margin-left: auto
on right
element instead. Also when you use display: flex
on parent element display: inline-block
on child elements is not going to work.
.row { border: 1px solid black; display: flex; align-items: center;}.left,.right { background-color: yellow;}.right { margin-left: auto;}
<div class="row"> <!--<div class="left">left</div>--> <div class="right">right</div></div>
CSS Flex-box justify-self / align-self not working
If you have defined your layout using display: flex
.
justify-self
will be ignored, i.e it will have no effect.
It will only have effect when you have used block
or grid
or have positioned an element using absolute
.
You can read more on that here.
With display:flex
, following properties are supported.
justify-content: flex-end; // horizontal axis when flex direction is row.
align-items: flex-end: // vertical axis when flex direction is row.
So if you are trying to place the footer at right-bottom of your parent container i.e content
.
Try this :
.footer{
padding-top: 2vh !important;
border-top: 1px solid rgba(0,173,181,1) !important;
justify-content: flex-end !important;
align-items: flex-end !important;
}
What is difference between justify-self, justify-items and justify-content in CSS grid?
To answer your questions:
1
As reiallenramos mentioned, "The justify-self and justify-items properties are not implemented in flexbox. This is due to the one-dimensional nature of flexbox, and that there may be multiple items along the axis, making it impossible to justify a single item. To align items along the main, inline axis in flexbox you use the justify-content property." - MDN
2-3
This screen shot from W3 does an excellent job of showing what they do and the differences between them.
Good To Knows:
For more information and example, I would suggest you check out:
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout
- https://www.smashingmagazine.com/2017/06/building-production-ready-css-grid-layout/
- https://www.smashingmagazine.com/2017/12/grid-inspector/
And for some inspiration:
- https://www.smashingmagazine.com/2017/10/css-grid-challenge-2017-winners/
How to justify a single flexbox item (override justify-content)
There doesn't seem to be justify-self
, but you can achieve similar result setting appropriate margin
to auto
¹. E. g. for flex-direction: row
(default) you should set margin-right: auto
to align the child to the left.
.container { height: 100px; border: solid 10px skyblue; display: flex; justify-content: flex-end;}.block { width: 50px; background: tomato;}.justify-start { margin-right: auto;}
<div class="container"> <div class="block justify-start"></div> <div class="block"></div></div>
Justify-self is not working when I want to align content in the center
You could take the a
element out of normal flow positioning it relative to it's parent div
.
See below for a demo and the documentation is in the comments:
div { background: #121212; font-size: 100%; display: flex; position: relative; /*Make sure the anchor tag is positioned relative to this div*/}a { color: #fff;/* padding: 2%; remove the padding */ display: flex; /*Make the element a flex container to center it's contents*/ justify-content: center; align-items: center; background: linear-gradient(180deg, rgba(18, 18, 18, 0.8) 0%, rgba(18, 18, 18, 0.5) 66.66%), url('https://cml.sad.ukrd.com/image/714544.png'); background-size: cover; background-position: top; white-space: nowrap; font-size: 18px;/* Position the element absolutely taking it out of the normal flow of the document */ position: absolute; top: 0; left: 0; height: 100%;}img { height: 100%; width: auto; display: flex; align-self: center; max-height: 50px; margin: 0 auto; /* fails justify-self: center; */}
<div> <a href="#">⟵ Some Text Goes Here</a> <img src="https://cml.sad.ukrd.com/image/714824.png"></div>
In flexbox I can't put items to right using justify-self: flex-end;
You could do justify-content: space-between
on the parent div, then remove the justify-self
property on both .signout and .profilepic class.
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>
Related Topics
How to Change Color Property of Mat-Slide-Toggle/ Overwrite CSS of Component
Is There a CSS Selector for Elements Containing Certain Text
How to Get Div Height to Auto-Adjust to Background Size
Which Characters Are Valid in CSS Class Names/Selectors
Fixed Position But Relative to Container
Targeting Only Firefox With Css
Change Bootstrap Navbar Collapse Breakpoint Without Using Less
Set Size on Background Image With Css
Css Hover Border Makes Inline Elements Adjust Slightly
Matching an Empty Input Box Using Css
How to Change the Color of an Svg Element
How to Set the Height of Vuetify Card
How to Style Html5 Range Input to Have Different Color Before and After Slider
How to Transition Height: 0; to Height: Auto; Using Css
Set Opacity of Background Image Without Affecting Child Elements
Transparent Text Cut Out of Background