javascript - 如何避免flex项目在折叠时具有相同的高度
问题描述
有一些元素来自数组,然后我需要将它们放置在带有显示 flex 的列表中,我的问题是我添加了一个按钮,该按钮应该折叠选定的元素,但其他元素的高度也会被修改......
尝试了不同的显示并将内联放置在 li 元素上,但没有任何效果。
有什么方法可以使列表中的元素内联且高度独立?
.dragscroll {
display: flex;
overflow-x: auto;
}
.rectangle-holder {
border: 1px solid black;
}
ul {
list-style-type: none;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid p-0">
<div class="row">
<div class="col-12">
<ul class="dragscroll">
<li class="rectangle-holder">
<div class="row">
<div class="col-12">
<p>Hello</p>
</div>
<div class="col-12">
<button class="btn btn-primary" data-target="#comment1" data-toggle="collapse" type="button">Collapse</button>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="collapse" id="comment1">
<p>Collapsable!</p>
</div>
</div>
</div>
</li>
<li class="rectangle-holder">
<div class="row">
<div class="col-12">
<p>Hello</p>
</div>
<div class="col-12">
<button class="btn btn-primary" data-target="#comment2" data-toggle="collapse" type="button">Collapse</button>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="collapse" id="comment2">
<p>Collapsable!</p>
</div>
</div>
</div>
</li>
<li class="rectangle-holder">
<div class="row">
<div class="col-12">
<p>Hello</p>
</div>
<div class="col-12">
<button class="btn btn-primary" data-target="#comment3" data-toggle="collapse" type="button">Collapse</button>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="collapse" id="comment3">
<p>Collapsable!</p>
</div>
</div>
</div>
</li>
<li class="rectangle-holder">
<div class="row">
<div class="col-12">
<p>Hello</p>
</div>
<div class="col-12">
<button class="btn btn-primary" data-target="#comment4" data-toggle="collapse" type="button">Collapse</button>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="collapse" id="comment4">
<p>Collapsable!</p>
</div>
</div>
</div>
</li>
<li class="rectangle-holder">
<div class="row">
<div class="col-12">
<p>Hello</p>
</div>
<div class="col-12">
<button class="btn btn-primary" data-target="#comment5" data-toggle="collapse" type="button">Collapse</button>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="collapse" id="comment5">
<p>Collapsable!</p>
</div>
</div>
</div>
</li>
<li class="rectangle-holder">
<div class="row">
<div class="col-12">
<p>Hello</p>
</div>
<div class="col-12">
<button class="btn btn-primary" data-target="#comment6" data-toggle="collapse" type="button">Collapse</button>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="collapse" id="comment6">
<p>Collapsable!</p>
</div>
</div>
</div>
</li>
<li class="rectangle-holder">
<div class="row">
<div class="col-12">
<p>Hello</p>
</div>
<div class="col-12">
<button class="btn btn-primary" data-target="#comment7" data-toggle="collapse" type="button">Collapse</button>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="collapse" id="comment7">
<p>Collapsable!</p>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</html>
解决方案
您需要添加 css 属性align-items: flex-start; . 它定义了弹性项目如何沿当前行的交叉轴布局的默认行为。并且flex-start设置跨起始边距的项目边缘被放置在跨起始线上。
.dragscroll {
display: flex;
overflow-x: auto;
align-items: flex-start;
}
推荐阅读
- java - 从 HashMap 创建 JList
- keras - 如何解释神经网络的预测
- docker - 在 Alpine Docker 容器中从源代码编译 Go 时出错:“loadinternal:找不到运行时/cgo”
- c# - 如何在 C# 中将 apikey 与 Google.Cloud.Speech.V1 一起使用?
- java - 如何检查堆栈的子堆栈?
- vue.js - Vue路由器依赖缺失
- apache-kafka - 使用 kafka 流状态存储来保存超过 5 亿条消息
- java - 当未来列表中的第一个元素为真时,为什么要完成任务?
- c++ - 有没有办法将擦除删除习语与其他循环条件一起使用?
- clojure - 自己制作一个 take 函数