我试图使所有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>
答案 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>