如何制作宽度和高度相等的flexbox物品

时间:2019-01-13 23:33:13

标签: html css css3 flexbox

我试图使所有flexbox项目的宽度和高度都相等,即使由于小屏幕(第三个链接环绕)而增加了行数时,它们也是如此。我相信关键属性是align-items:stretch,但这是行不通的。我在哪里犯错?

我无法修改html-结构为nav > ul > li > a

我已经阅读了很多,并在这里看到了类似的解决方案,但是它们都是没有内部结构的简单列表(在我的案例中,a链接),他们只是将display:flex设置为子元素。但是,在我看来,这违反了“相同宽度”的要求。

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>

1 个答案:

答案 0 :(得分:2)

您几乎不错,li的身高是相等的,但不是相等。只需添加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>