В моем коде сложное выравнивание элементов Flex - PullRequest
Новая
       6

В моем коде сложное выравнивание элементов Flex

0 голосов
/ 31 мая 2018

Пожалуйста, я перепробовал все возможные способы, чтобы выровнять мою футболку по ряду, но она оказалась неудачной.Мой код ниже.спасибо за вашу необычную помощь.Я попробовал несколько ответов здесь, но они также оказались неудачными.Любая помощь будет принята с благодарностью. 

.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>

1 Ответ

0 голосов
/ 31 мая 2018

Измените ваш 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>
...