Donny P Donny P - 18 days ago 5
CSS Question

Align flex item to end of container

Using flexbox, how can you align a

<p>
to its parent's "end"?

According to the documentation, adding
align-content: flex-end
to the parent element should be enough. However, this isn't working in the example below.

Example:

Here is a simple div containing a
p
element.



div {
display: flex;
flex-direction: column;
align-content: flex-end; /* This should do the alignment, but doesn't. */
background: yellow;
padding: 50px;
height: 300px;
width: 400px;
}

<div>
<p>Align me to the end.</p>
</div>





jsFiddle

A hacky solution would be to add a
::before
to the child with
flex: 1
, but I'm curious if there is a better solution.

Answer

The align-content property only works when there are multiple lines of flex items in a container. This property is designed to distribute the space between lines.

Since there is only one line in your container, align-content is having no effect.

Use align-items in a single line container.

div {
  display: flex;
  flex-direction: column;
  align-items: flex-end;     /* changed from align-content */
  justify-content: flex-end; /* optional */
  background: yellow;
  padding: 50px;
  width: 400px;
  height: 300px;
}
<div>
  <p>
    Align me in the bottom left corner.
  </p>
</div>

revised fiddle

8.4. Packing Flex Lines: the align-content property

The align-content property aligns a flex container’s lines within the flex container when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.

Note, this property has no effect on a single-line flex container.

Only multi-line flex containers ever have free space in the cross-axis for lines to be aligned in, because in a single-line flex container the sole line automatically stretches to fill the space.