我想在垂直中间和两端添加上一个和下一个。似乎将 prev 放在中间的唯一方法是在容器 div 高度为 100px 时提供 margin-top:50px。但是容器高度可能会有所不同，因此对其进行硬编码是没有意义的。另外，由于有一个水平滚动条，我不能将 next 放在另一端向右。
::-webkit-scrollbar {
display: none;
}
.scrolling-wrapper-flexbox {
display: flex;
display:flex-inline;
flex-wrap: nowrap;
overflow-x: auto;
-ms-overflow-style: none;
::ng-deep .card {
flex: 0 0 auto;
margin-right: 3px;
}
}
::ng-deep .card {
border-radius: 10px;
border: 2px solid grey;
width: 150px;
height: 100%;
background: white;
text-align: center;
padding-top: 3px;
}
.scrolling-wrapper-flexbox {
height: 100%;
margin-bottom: 20px;
width:50%;
flex: 0 0 50%;
-webkit-overflow-scrolling: touch;
::-webkit-scrollbar {
display: none;
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div >
<div class="scrolling-wrapper-flexbox" #widgetsContent>
<span style="background-color:red" class="card">prev</span>
<div class="card">
<img src="https://img.icons8.com/material/4ac144/256/camera.png" alt="Smiley face" width="90" height="90" >
</div>
<div class="card">
<img src="https://www.freeiconspng.com/uploads/flat-blue-home-icon-4.png" alt="Smiley face" width="90" height="90" >
</div>
<div class="card">
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/e/e0/WPVG_icon_2016.svg/1024px-WPVG_icon_2016.svg.png" alt="Smiley face" width="90" height="90" >
</div>
<div class="card">
<img src="https://img.icons8.com/material/4ac144/256/camera.png" alt="Smiley face" width="90" height="90" >
</div>
<div class="card">
<img src="https://www.freeiconspng.com/uploads/flat-blue-home-icon-4.png" alt="Smiley face" width="90" height="90" >
</div>
<div class="card">
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/e/e0/WPVG_icon_2016.svg/1024px-WPVG_icon_2016.svg.png" alt="Smiley face" width="90" height="90" >
</div>
<div class="card">
<img src="https://img.icons8.com/material/4ac144/256/camera.png" alt="Smiley face" width="90" height="90" >
</div>
<div class="card">
<img src="https://www.freeiconspng.com/uploads/flat-blue-home-icon-4.png" alt="Smiley face" width="90" height="90" >
</div>
<div class="card">
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/e/e0/WPVG_icon_2016.svg/1024px-WPVG_icon_2016.svg.png" alt="Smiley face" width="90" height="90" >
</div>
</div>
<div class="next">Next</div>
</div>
</body>
</html>请记住，我没有使用 Bootstrap 。
最佳答案
再添加一个 flex 容器并添加上一个按钮、内容和下一个按钮，并赋予 align-items center 使其垂直居中。
::-webkit-scrollbar {
display: none;
}
.flex-container {
display: flex;
align-items:center;
}
.scrolling-wrapper-flexbox {
display: flex;
display:flex-inline;
flex-wrap: nowrap;
overflow-x: auto;
-ms-overflow-style: none;
::ng-deep .card {
flex: 0 0 auto;
margin-right: 3px;
}
}
::ng-deep .card {
border-radius: 10px;
border: 2px solid grey;
width: 150px;
height: 100%;
background: white;
text-align: center;
padding-top: 3px;
}
.scrolling-wrapper-flexbox {
height: 100%;
margin-bottom: 20px;
width:50%;
flex: 0 0 50%;
-webkit-overflow-scrolling: touch;
::-webkit-scrollbar {
display: none;
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="flex-container">
<div class="card">prev</div>
<div class="scrolling-wrapper-flexbox" #widgetsContent>
<div class="card">
<img src="https://img.icons8.com/material/4ac144/256/camera.png" alt="Smiley face" width="90" height="90" >
</div>
<div class="card">
<img src="https://www.freeiconspng.com/uploads/flat-blue-home-icon-4.png" alt="Smiley face" width="90" height="90" >
</div>
<div class="card">
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/e/e0/WPVG_icon_2016.svg/1024px-WPVG_icon_2016.svg.png" alt="Smiley face" width="90" height="90" >
</div>
<div class="card">
<img src="https://img.icons8.com/material/4ac144/256/camera.png" alt="Smiley face" width="90" height="90" >
</div>
<div class="card">
<img src="https://www.freeiconspng.com/uploads/flat-blue-home-icon-4.png" alt="Smiley face" width="90" height="90" >
</div>
<div class="card">
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/e/e0/WPVG_icon_2016.svg/1024px-WPVG_icon_2016.svg.png" alt="Smiley face" width="90" height="90" >
</div>
<div class="card">
<img src="https://img.icons8.com/material/4ac144/256/camera.png" alt="Smiley face" width="90" height="90" >
</div>
<div class="card">
<img src="https://www.freeiconspng.com/uploads/flat-blue-home-icon-4.png" alt="Smiley face" width="90" height="90" >
</div>
<div class="card">
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/e/e0/WPVG_icon_2016.svg/1024px-WPVG_icon_2016.svg.png" alt="Smiley face" width="90" height="90" >
</div>
</div>
<div class="next">Next</div>
</div>
</body>
</html>关于javascript - 如何在 flexbox carousel 的中间正确定位上一个和下一个按钮？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58786353/