Item alignment and line alignment

Choose the property that matches what you need to move.

align-self: one item

Defaultflex-startflex-end

align-self overrides the container’s align-items value for one item.

align-content: flex-start

OneTwoThreeFourFiveSix

Wrapped lines pack at the cross-axis start.

align-content: space-between

OneTwoThreeFourFiveSix

Multiple lines share spare cross-axis space. A single line would show no effect.

Important HTML

Cross-axis demos use a flex row of cells.

<div class="self-demo">
  <span class="self-start">…</span>
  <span class="self-end">…</span>
</div>

Important CSS

align-items sets the line; align-self overrides one item.

.self-demo { display: flex; align-items: center; }
.self-demo .self-start { align-self: flex-start; }
.self-demo .self-end { align-self: flex-end; }