What is the difference between align-items and align-content?

Asked

Viewed 106 times

4

Is there any difference between the align-items and the align-content?

css flexbox

  • Lucas, if the answer below solved your problem and there is no doubt left, you can mark it as correct/accepted by clicking on the " " that is next to it, which also marks your question as solved. If you still have any questions or would like further clarification, feel free to comment.

1 answer

4

align-items

The estate align-items aligns the items inside a flex container along the cross axis (perpendicular). It works the same way as the justify-content for the main axis.

In the case of the default value of flex-direction: row, the cross axis corresponds to the vertical and the main axis corresponds to the horizontal. With flex-direction: column, these two are exchanged respectively. Ie in the direction row, one align-items: center align the elements with the height in the center of the line:

.container {
  display: flex;
  align-items: center;
  background-color: #cccccc;
}

.box {
  display: inline-block;
  width: 50px;
  background-color: #0066ff;
  margin: 0 4px;
}

.box1 { height: 50px; }
.box2 { height: 30px; }
.box3 { height: 80px; }
.box4 { height: 60px; }
.box5 { height: 20px; }
<div class="container">
  <div class="box box1">1</div>
  <div class="box box2">2</div>
  <div class="box box3">3</div>
  <div class="box box4">4</div>
  <div class="box box5">5</div>
</div>

align-content

The estate align-content aligns the lines of a flex container when there is extra space on the cross axis. That is, it has no effect within single-line items.

function alignItems() {
  document.querySelector('.container').classList.toggle("alignItems");
}
.container {
  display: flex;
  background-color: #cccccc;
  flex-wrap: wrap;
  height: 300px;
  align-content: center;
  width: 300px;
}

.alignItems { align-items: flex-end; }

.box {
  display: inline-block;
  width: 50px;
  background-color: #0066ff;
  margin: 0 4px;
}

.box1 { height: 50px; }
.box2 { height: 30px; }
.box3 { height: 80px; }
.box4 { height: 60px; }
.box5 { height: 20px; }
<button onClick={alignItems()}>Toggle align-items: flex-end</button>
<div class="container">
    <div class="box box1">1</div>
    <div class="box box2">2</div>
    <div class="box box3">3</div>
    <div class="box box4">4</div>
    <div class="box box5">5</div>
    <div class="box box1">6</div>
    <div class="box box2">7</div>
    <div class="box box3">8</div>
    <div class="box box4">9</div>
    <div class="box box5">10</div>
</div>

References:

Browser other questions tagged css flexbox

You are not signed in. Login or sign up in order to post.