2

I am learning CSS and I am trying to understand this behavior.

section{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.banner-area a.banner-btn{
  padding: 15px 35px;
  background: crimson; 
}

.banner-area {
  text-align: center;
}
<section class="banner-area">
  <div class="banner-img"></div>
  <h1>Flexbox Website</h1>
  <h3>Responsive Web Design</h3>
  <a href="#" class="banner-btn">Contact us</a> 
</section>

I was trying to play with the CSS and I found out that when I removed align-items: center, the element now takes the entire line, but I couldn't understand why.

Can someone help me understand the reason? Thank you

Youssouf Oumar
  • 29,373
  • 11
  • 46
  • 65
Rony
  • 85
  • 4

2 Answers2

4

That's because the default value for align-items is stretch. When you remove the align-items: center it reverts to the default value, which is stretch. By default, it stretches the items vertically, but because you have specified your flex-direction: column everything rotates 90 degrees and items stretch horizontally (taking the whole line) instead of vertically (taking the whole column)

Farzam
  • 82
  • 4
2

The default value of align-items is stretch, which will stretch the children to fill the flex container.

I found the CSS Tricks Flexbox guide to be really helpful while learning flex

raz-ezra
  • 514
  • 1
  • 15