Menu
I have a row-direction flexbox nested in a column-direction flexbox, but when I want to use align-content in the child, it doesn't work.
When I replace display:flex of the parent by a display:block, it works.
In the code below, we can see that .row align-content: flex-end; doesn't work. But if I replace the .column display: flex; with display: block;, the align-content: flex-end; works.
Is it possible to fix this, please?
body {
background-color: grey;
}
.column {
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: stretch;
background-color: green;
}
.row {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-content: flex-end;
align-items: center;
background-color: red;
}
.row-test {
min-height: 200px;
}
span {
width: 30%;
background-color: orange;
}<body class="column">
<section class="row row-test">
<span>Test Test Test Test Test Test Test Test Test</span>
<span>Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test</span>
</section>
</body>
542
The fact that align-content "works" when the primary flex container is switched to display: block is simply a browser bug.
It shifts the flex items to the bottom, as desired, but only in Firefox.
In Chrome it doesn't do anything, which is the correct behavior (per the spec).
And in IE11 it shifts the items to the top (also nonconformant).
These are bugs and inconsistencies that shouldn't be relied upon for guidance, as they don't help to explain how the align-content property works.
In a single line flex container, like the one in the question, align-content has no effect. The property to use is align-items.
In a multi-line flex container, the property to use is align-content.
Also, the align-self property is closely related to align-items. One is designed to override the other. They both function together.
From the spec:
8.3. Cross-axis Alignment: the
align-itemsandalign-selfproperties
align-itemssets the default alignment for all of the flex container’s items, including anonymous flex items.align-selfallows this default alignment to be overridden for individual flex items.8.4. Packing Flex Lines: the
align-contentpropertyThe
align-contentproperty aligns a flex container’s lines within the flex container when there is extra space in the cross-axis, similar to howjustify-contentaligns individual items within the main-axis. Note, this property has no effect on a single-line flex container.
In terms of this question, forget about align-content. It's useless (unless your flex items wrap).
Simply use align-items: flex-end (or align-self: flex-end on the span's):
body {
background-color: grey;
}
.column {
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: stretch;
background-color: green;
}
.row {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-content: flex-end; /* will work when items have wrapped */
align-items: flex-end; /* adjusted; works when items in one line */
background-color: red;
}
.row-test {
min-height: 200px;
}
span {
width: 30%;
background-color: orange;
/* align-self: flex-end; this would also work on single line container */
}<body class="column">
<section class="row row-test">
<span>Test Test Test Test Test Test Test Test Test</span>
<span>Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test</span>
</section>
</body>Maybe you want to use justify-content instead of align-content
22
You need to add flex-wrap: wrap; to work align-content
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
