CODEWITHSUNDEEP
htmlcssflexbox
Jan Koupil
Jan Koupil

Reputation: 111

How to make flexbox items of equal width and height

I am trying to make all flexbox items of equal width & also height even when they increase their number of lines due to small screen (where the third link wraps). I believed that the key property is the align-items:stretch , but this does not work. Where am I making the mistake?

I cannot modify the html - the structure is given as nav > ul > li > a.

I have read quite a lot around and seen similar solutions here, but they all are only simple lists without the inner structure (the a links in my case) and they simply just set display:flex on the child element. This however in my case breaks the "same width" requirement.

body {
  font-family: Lucida, sans-serif;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;    
  display: flex;
  justify-content: space-between;
  align-items: stretch; /* This is what I thought to be the key property*/
}  
nav li {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  text-align: center; 
}
nav a {
  text-decoration: none;
  color: #000;
  border: 2px solid rgb(20, 60, 168);
  background-color: rgba(20, 60, 168, .2);
  padding: 10px 10px 8px;
  display: block;
}
<nav>
  <ul>
    <li><a href="#">First</a></li>
    <li><a href="#">Second</a></li>
    <li><a href="#">The third seems to be quite long</a></li>
    <li><a href="#">Fourth</a></li>
  </ul>
</nav>

Upvotes: 5

Views: 15216

Answers (1)

Temani Afif
Temani Afif

Reputation: 272591

You are almost good, the li are equal height but not their content. Simply add height: 100%;

body {
  font-family: Lucida, sans-serif;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;    
  display: flex;
  justify-content: space-between;
  /*align-items: stretch;  not needed, it's by default*/
}  
nav li {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  text-align: center; 
}
nav a {
  text-decoration: none;
  color: #000;
  border: 2px solid rgb(20, 60, 168);
  background-color: rgba(20, 60, 168, .2);
  padding: 10px 10px 8px;
  display: block;
  height:100%;
  box-sizing:border-box; /*Don't forget this*/
}
<nav>
  <ul>
    <li><a href="#">First</a></li>
    <li><a href="#">Second</a></li>
    <li><a href="#">The third seems to be quite long</a></li>
    <li><a href="#">Fourth</a></li>
  </ul>
</nav>

Upvotes: 6

Related Questions