Think of flex-end as telling a row of items, “Please gather at the far edge.” It places flex items at the end of their chosen axis. section 12.2
Use it in three small steps:
- Make the element a flex container with display: flex. section 12.2
- Choose the direction with flex-direction; this determines the main axis. section 12.2
- Set justify-content: flex-end for the main axis, or align-items: flex-end for the cross axis. section 12.2
Captions at the bottom
A photo caption can use flex-direction: column and justify-content: flex-end so its text sits at the bottom of an overlay. Add a hover rule to reveal the caption. section 15.51
.image-caption {
display: flex; #1
flex-direction: column; #1
justify-content: flex-end; #1
position: absolute; #2
left: 0; #2
top: 0; #2
width: 300px; #3
height: 200px; #3
background-color: rgba(32, 32, 32, 0.75); #4
color: #ecd078;
opacity: 0; #5
}
This complete caption rule shows flex-end working with a vertical main axis inside an absolutely positioned thumbnail overlay. section 15.51
