Jessica Jessica - 5 months ago 14
HTML Question

align-content: flex-end not moving elements to container bottom

I have an

outerWrapper
,
innerWrapper
, and children.
outerWrapper
has a height of
300px
, and is
display: flex
.
innerWrapper
is also
display: flex
. (I think) because they are
flex
,
innerWrapper
inherits
outerWrappers
height.

I want to add
align-content: flex-end
to
outerWrapper
. But it doesn't work, because
innerWrapper
inherits
outerWrappers
height. How can I add
align-content: flex-end
to
outerWrapper
? Or, how can I keep
innerContents
height the same height as its children, so
align-content: flex-end
will work?

Here's an image describing what I want:

enter image description here

I want to bring
innerContent
down to the red line.

JSFiddle





#outerWrapper {
height: 300px;
background-color: lightgreen;
display: flex;
flex-wrap: wrap;
align-content: flex-end;
}
ul {
padding: 0;
margin: 0;
display: flex;
align-items: center;
flex-wrap: wrap;
}
li {
list-style-type: none;
width: 100px;
height: 100px;
background-color: lightblue;
border: 1px solid;
}

<div id="outerWrapper">
<ul id="innerWrapper">
<li class="child">I'm #01</li>
<li class="child">I'm #02</li>
<li class="child">I'm #03</li>
<li class="child">I'm #04</li>
<li class="child">I'm #05</li>
</ul>
</div>





Update

I just want to clarify. I want
innerWrapper
to end at the red line, not start.

Answer

please try align-items:flex-end; instead of align-content:flex-end;.

align-content is for multi line flexible boxes. It has no effect when items are in a single line. It aligns the whole structure according to its value.

The align-items property of flex-box aligns the items inside a flex container vertically just like justify-content does for horizontal axis.