CODEWITHSUNDEEP
htmlcssflexbox
Don P
Don P

Reputation: 63597

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.

Upvotes: 2

Views: 8335

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371193

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.

Upvotes: 3

Related Questions