在我的代码中难以将弹性项对齐到行

Question

请我尝试一切可能的方法将我的.shirt-box与行对齐，但事实证明它已经失败了。我的代码如下。谢谢你的不寻常的帮助。我在这里尝试了几个答案，但他们也证明了流产。任何帮助将不胜感激。

.shirt-box {
	-ms-flex: 0 0 300px;
    flex: 0 0 300px;
	height: 300px;
	background-image: url("Blue_Tshirt.jpg");
	background-size: cover;
	cursor: pointer;
	/*margin: 0 auto;*/
	/*margin: 0 40px;*/
	/*float: left;*/
	/*display: inline-block;*/
	border-radius: 5px;
	position: relative;
	-webkit-box-shadow: 1px 1px 8px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 1px 1px 8px 0px rgba(0,0,0,0.75);
	box-shadow: 1px 1px 8px 0px rgba(0,0,0,0.75);
}
.shirt-box:hover {
	transform: translateY(-3px);
}
.container-flex {
	display: flex;
	flex-flow:row wrap;
	align-items: center;
    justify-content:space-around;
}
body {
	font-family: 'Dosis', sans-serif;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Dosis:300,400,600,700,800" rel="stylesheet">
<section class="centerpage">
	<div class="container-fluid">
		<div class="row container-flex">
			<div class="col shirt-box">
      	
			</div>
		</div>
	</div>
	<div class="container-fluid">
		<div class="row container-flex">
			<div class="col shirt-box">
      </div>
		</div>
	</div>
</section>

Answer 1

更改您的html，如下所示。删除额外的容器和行div

.unpinned{
  height: calc(100vh - 430px);
}
.pinned{
  height: calc(100vh - 447px);
}
.pinned{
  -ms-overflow-style: none;
  overflow: auto;
  width: 560px;
}
.unpinned{
  overflow: scroll;
  flex: 1;
}
/deep/ .pinned::-webkit-scrollbar {
  width: 0;
}

.shirt-box {
	-ms-flex: 0 0 300px;
    flex: 0 0 300px;
	height: 300px;
	background-image: url("Blue_Tshirt.jpg");
	background-size: cover;
	cursor: pointer;
	/*margin: 0 auto;*/
	/*margin: 0 40px;*/
	/*float: left;*/
	/*display: inline-block;*/
	border-radius: 5px;
	position: relative;
	-webkit-box-shadow: 1px 1px 8px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 1px 1px 8px 0px rgba(0,0,0,0.75);
	box-shadow: 1px 1px 8px 0px rgba(0,0,0,0.75);
}
.shirt-box:hover {
	transform: translateY(-3px);
}
.container-flex {
	display: flex;
	flex-flow:row wrap;
	align-items: center;
    justify-content:space-around;
}
body {
	font-family: 'Dosis', sans-serif;
}