html - 在我的代码中很难将 flex 元素与行对齐

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

.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">
            sdfsdfs sdf sdf sdf sdf sdf
         </div>
         <div class="col shirt-box">
            sdfsdfs sdf sdf sdf sdf sdf
         </div>
      </div>
   </div>
</section>