Improving balance in flexbox lines
This seems something currently not possible but planned for Flexbox Level 2.
The planned features list isn't much detailed but I think it would be one of those:
- Solve the “items on the last line get way too big when you're flexing” problem. More generally, “make items have a consistent flexed
size, regardless of how much extra space is on each line”.
- Possible solution - calculate minimum values of 1fr and alignment free space across the entire flexbox (instead of per-line) and use
that.- Flex line balancing.
Improving balance in flexbox lines
This seems something currently not possible but planned for Flexbox Level 2.
The planned features list isn't much detailed but I think it would be one of those:
- Solve the “items on the last line get way too big when you're flexing” problem. More generally, “make items have a consistent flexed
size, regardless of how much extra space is on each line”.
- Possible solution - calculate minimum values of 1fr and alignment free space across the entire flexbox (instead of per-line) and use
that.- Flex line balancing.
Flex-box: Align last row to grid
Add a ::after
which autofills the space. No need to pollute your HTML. Here is a codepen showing it: http://codepen.io/DanAndreasson/pen/ZQXLXj
.grid {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.grid::after {
content: "";
flex: auto;
}
Aligning elements left, center and right in flexbox
Use nested flex containers and flex-grow: 1
.
This allows you to create three equal-width sections on the nav bar.
Then each section becomes a (nested) flex container which allows you to vertically and horizontally align the links using flex properties.
Now the left and right items are pinned to the edges of the container and the middle item is perfectly centered (even though the left and right items are different widths).
.nav { display: flex; height: 50px; /* optional; just for demo */ background: white;}
.links { flex: 1; /* shorthand for: flex-grow: 1, flex-shrink: 1, flex-basis: 0 */ display: flex; justify-content: flex-start; align-items: center; border: 1px dashed red;}
.header-title { flex: 1; display: flex; justify-content: center; align-items: center; border: 1px dashed red;}
.logout { flex: 1; display: flex; justify-content: flex-end; align-items: center; border: 1px dashed red;}
.links a { margin: 0 5px; text-decoration: none;}
<div class="nav mobilenav">
<div class="links"> <a href="/institutions/">Institutioner</a> <a href="/leaders/">Ledere</a> </div>
<div class="header-title">Institution institution 1</div>
<div class="logout"><a class="button-dark" href="/user/logout">Log ud</a></div>
</div>
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>
How to align multiple flex boxes on top of each other?
Hide the overflow to stop flex items from growing when text doesn't fit, but also wrap overflowing text to keep it visible.
div {
display: flex;
gap: 5rem;
width: 350px;
}
div p {
border: 1px solid;
flex: 1;
overflow: hidden;
overflow-wrap: break-word;
}
<div>
<p> one </p>
<p> two </p>
<p> three </p>
</div>
<div>
<p> oneone one one one one </p>
<p> twotwotwo two two two </p>
<p> threethreethreethree three </p>
</div>
<div>
<p> oneoneoneoneoneoneoneoneoneone </p>
<p> twotwotwotwotwotwotwotwotwotwo </p>
<p> threethreethreethreethreethreethree </p>
</div>
Related Topics
How to Animate Element Again, After Animation-Fill-Mode: Forward
Use CSS Selectors Like: First-Child Inside Shadow Dom
How to Prevent Ggplot Hoveropts Messages to Go Off Screen with CSS
Why CSS Is Not Working When Sending HTML Email
CSS Select Second Level Elements
Use CSS to Make Background-Image Above Background-Color in a List
Lesscss - Ie Gradient Filter with Variables and Lighten
Apply External CSS to Specific Area
Ionic 4 How to Change: Shadow Dom in CSS
How to Reuse React-Native Stylesheet (Styles) in React
Some Classes Have No Effect After Adding Tailwind.CSS to a Vue.Js Project
Easiest Way to Convert Polygon Clip-Path to Microsoft Edge Supported "Clippath" Svg
How to Create a Button (Or Div) with a Border That Has a Gradient and Has Rounded Corners
How to Apply a CSS Stylesheet to All Page Views in My Firefox Browser
Position:Fixed in Windows Phone 7
How to Make Rotated Elements in a Flexbox Fixed to The Right Side of a Page