我正在尝试在垂直中间和两端添加prev和next。如果容器div高度为100px，那么将prev放在中间的唯一方法似乎是给出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>请记住，我没有使用引导程序。
再添加一个flex容器，添加上一个按钮、内容和下一个按钮，并将align items设置为居中，使其垂直居中。
::-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>