html - 如何使其父项的弹性项目高度?
问题描述
我有一个简单的导航类型布局,使用 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>
解决方案
使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>
推荐阅读
- javascript - 如何检查字段集中的任何表单元素是否具有焦点
- javascript - MVC轮播在IE11中不起作用
- javascript - Vuex:使用突变变量设置状态对象
- c# - 填充数组时出现 System.InvalidOperationException 错误
- amazon-web-services - 如何在cli的ec2输出中使用过滤器
- python - 从已发布的 Power BI 视觉对象中抓取数据
- mysql - MySQL - 查询以使用外部参考值更新所有行?
- node.js - 如何在节点js中访问查询回调之外的变量
- android - 谷歌地图的地理围栏和准确性,以使用付费版本的谷歌地图 API 定位特定地点
- javascript - 经纬度和坐标格式的区别