如何使flex项的高度为其父项？
如何使flex项的高度为其父项？
提问于 2019-03-12 18:09:12
我有一个简单的导航类型布局，使用flex来水平间隔不同宽度的项目。项目之间有线条，但由于内容具有不同的高度，所以它们的高度也不同
如何将项目设置为父项目的高度，以便所有分割线都位于父项目的顶部。
https://codepen.io/anon/pen/zbEMVd
* {
font-family: sans-serif;
}
.wrap {
border: 1px solid grey;
display: flex;
padding: 5px;
justify-content: space-between;
max-width: 1200px;
}
.item:not(:last-of-type) {
border-right: 2px solid red;
}
.item-1 {
width: 150px;
}
.item-2 {
width: 50px;
}
.item-3 {
width: 50px;
}
.item-4 {
width: 50px;
}
.item-5 {
flex: 1;
}
.item-6 {
width: 50px;
}<div class="wrap">
<div class="item item-1">One</div>
<div class="item item-2">Two Two Two Two Two </div>
<div class="item item-3">Three Three Three</div>
<div class="item item-4">Four</div>
<div class="item item-5">Five</div>
<div class="item item-6">Six</div>
</div>
回答 2
Stack Overflow用户
发布于 2019-03-12 18:14:26
从.item中删除align-self，然后添加display:flex; align-items: flex-end;。
.item{
display: flex;
align-items: flex-end;
/* ... */
}Stack Overflow用户
发布于 2019-03-12 18:18:26
使item元素成为反列flexbox (并从中移除align-self: flex-end )以获得效果-请参见下面的演示：
* {
font-family: sans-serif;
}
.wrap {
border: 1px solid grey;
display: flex;
padding: 5px;
justify-content: space-between;
max-width: 1200px;
}
.item {
/* align-self: flex-end; */
display: flex; /* ADDED */
flex-direction: column-reverse; /* ADDED */
background: #ddd;
}
.item:not(:last-of-type) {
border-right: 2px solid red;
}
.item-1 {
width: 150px;
}
.item-2 {
width: 50px;
}
.item-3 {
width: 50px;
}
.item-4 {
width: 50px;
}
.item-5 {
flex: 1;
}
.item-6 {
width: 50px;
}<div class="wrap">
<div class="item item-1">One</div>
<div class="item item-2">Two Two Two Two Two </div>
<div class="item item-3">Three Three Three</div>
<div class="item item-4">Four</div>
<div class="item item-5">Five</div>
<div class="item item-6">Six</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55118873
复制相关文章
相似问题
腾讯云开发者
