justify-content & align-items (column)

justify-content (column)

justify-content in a container with flex-direction: column, aligns the child elements vertically inside the flex container.

flex-start (default): Aligns all elements at the top of the container.
center: Centers elements vertically.
flex-end: Aligns all elements at the bottom of the container.
space-between: First element at the top, last at the bottom, others spaced in between.
space-around: Equal space around each element, with half of it at the edges.
space-evenly: Equal space between elements and around them.

align-items (column)

align-items in a container with flex-direction: column, aligns the child elements horizontally.

stretch (default): Elements stretch horizontally to the container’s width (if no fixed width is set).
flex-start: Aligns all elements to the left.
center: Centers elements horizontally.
flex-end: Aligns all elements to the right.

Example

With this dynamic example you can see the different arrangements of the child elements by modifying the justify-content and align-items properties in the selectors.

Select align-items:

stretchflex-startcenterflex-end

ResultLiveContainer width100%

html

<div class="container">
  <span class="child-1">1</span>
  <span class="child-2">2</span>
  <span class="child-3">3</span>
</div>

<div class="container">
  <span class="child-1">1</span>
  <span class="child-2">2</span>
  <span class="child-3">3</span>
</div>

css

.container {
  border: 1px solid #2b7de0;
  display: flex;
  gap: 1rem;
  align-items: stretch;
  flex-direction: column;
  height: 15rem;
  justify-content: flex-start;
  padding: 0.5rem;
}

.child-1 {
  padding: 0.5rem;
}

.child-2 {
  padding: 1rem;
}

.child-3 {
  padding: 2rem;
}

.container {
  border: 1px solid #2b7de0;
  display: flex;
  gap: 1rem;
  align-items: stretch;
  flex-direction: column;
  height: 15rem;
  justify-content: flex-start;
  padding: 0.5rem;
}

.child-1 {
  padding: 0.5rem;
}

.child-2 {
  padding: 1rem;
}

.child-3 {
  padding: 2rem;
}

Edit the code or use the selectors: the result updates instantly.