Jonah Jonah - 6 months ago 23
HTML Question

Why are justify-content and align-items being ignored?

In the snippet below, why are

justify-content
and
align-items
having no effect? I would expect the column to be centered within the containing box, with the extra space at the bottom distributed around the boxes. Why is this not the case?

enter image description here



.column {
border: 2px solid black;
display: flex column;
justify-content: space-around;
align-items: center;
height: 300px;
}
.card {
background: red;
border: 1px solid green;
width: 50px;
height: 50px;
}

<div class="column">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>




Answer

Use

display: flex;
flex-direction: column;

.column {
  border: 2px solid black;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  height: 300px;
}
.card {
  background: red;
  border: 1px solid green;
  width: 50px;
  height: 50px;
}
<div class="column">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>