0

Take a look at the example below:

.item {
  padding: 16px;
  height: 50px;
}

.first {
  background-color: red;
  display: inline-flex;
}

.second {
  background-color: green;
  display: inline-flex;
  align-items: center;
}
<div>
  <div class="item first">1</div>
  <div class="item second">2</div>
</div>

I'd like to understand why setting align-items: center on the second box made the first one pushed downwards.

Disclaimer: I know how to fix this problem, I just wanted to get an explanation, like for a dummy, why does it behave like that because I struggle to understand this behaviour.

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
sarneeh
  • 1,320
  • 1
  • 12
  • 27
  • 1
    https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container – SuperDJ Apr 22 '19 at 10:12
  • 1
    TL;DR from both duplicate: "baseline alignment" (note that flexbox has nothing to do here, it will happen even with simple inline-block or inline-grid, etc) – Temani Afif Apr 22 '19 at 10:12
  • @SuperDJ I think Temani is correct - flexbox has nothing to do here, but anyways thanks for trying to help! :) – sarneeh Apr 22 '19 at 10:39
  • @TemaniAfif Thanks for those resources and sorry for this duplicate! – sarneeh Apr 22 '19 at 10:39
  • no need to be sorry, it's not always easy to find the non trivial duplicates. – Temani Afif Apr 22 '19 at 10:45
  • .item { padding: 16px; height: 50px; display:flex; align-items:center; } do u want this? – fdurna Apr 22 '19 at 11:03

0 Answers0