在我的代码中将弹性项目与行对齐答案

【问题标题】：Aligning flex items to row difficult in my code在我的代码中将弹性项目与行对齐
【发布时间】：2018-06-09 00:34:03
【问题描述】：

请我已经尝试了所有可能的方法来将我的 .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>

【问题讨论】：

不清楚您要做什么。您能否详细说明align my .shirt-box to row 的含义？

标签： html twitter-bootstrap css flexbox

【解决方案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>

【讨论】：