greenfox07
@greenfox07

Как расположить карточки таким образом с помощью flexbox?

Не могу правильно выровнять карточки товаров, большой блок получается по размеру больше чем 2 маленьких.

Как у меня:5b6f24d26b222813146383.jpeg
Как надо:5b6f24d9f1ec5666000245.jpeg

HTML код:

<div class="lookbook-cards">
	<a href="#" class="card">
		<span class="small-price"><sup>ref</sup>m1</span>
		<img src="img/cards/lookbook/photo-1.jpg" alt="">
	</a>
	<a href="#" class="card">
		<span class="small-price"><sup>ref</sup>w1</span>
		<img src="img/cards/lookbook/photo-2.jpg" alt="">
	</a>
	<a href="#" class="card card--medium">
		<img src="img/cards/lookbook/photo-3.jpg" alt="">
		<!-- <h2 class="title"><span class="bold">Jane’s</span> lookbook</h2> -->
	</a>

	<a href="#" class="card">
		<span class="small-price"><sup>ref</sup>w1</span>
		<img src="img/cards/lookbook/photo-4.jpg" alt="">
	</a>
	<a href="#" class="card">
		<span class="small-price"><sup>ref</sup>w1</span>
		<img src="img/cards/lookbook/photo-5.jpg" alt="">
	</a>
	<a href="#" class="card">
		<span class="small-price"><sup>ref</sup>w1</span>
		<img src="img/cards/lookbook/photo-6.jpg" alt="">
	</a>
	<a href="#" class="card">
		<span class="small-price"><sup>ref</sup>w1</span>
		<img src="img/cards/lookbook/photo-7.jpg" alt="">
	</a>
	<a href="#" class="card card--long">
		<img src="img/cards/lookbook/photo-8.jpg" alt="">
	</a>
	<a href="#" class="card">
		<span class="small-price"><sup>ref</sup>w1</span>
		<img src="img/cards/lookbook/photo-9.jpg" alt="">
	</a>
</div>


LESS код:

.lookbook-cards {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	position: relative;
	padding-bottom: 62px;

	&::after {
		.line;
		bottom: 0;
	}
}

.card {
	margin-bottom: 20px;
	background: @bg-color;
}

.card--medium {
	position: relative;
	& h2 {
		position: absolute;
		top: 0;
	}
}

.card--long {
	flex-grow: 1;
	background-color: #efefed;
}
  • Вопрос задан
  • 2481 просмотр
Решения вопроса 1
.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}
.col-3 {
   flex: 0 0 25%;
  max-width: 25%;
  padding: 0 10px;
  box-sizing: border-box;
}
.col-6 {
  flex: 0 0 50%;
  max-width: 50%;
  padding: 0 10px;
  box-sizing: border-box;
}
.col-9 {
  flex: 0 0 75%;
  max-width: 75%;
  padding: 0 10px;
  box-sizing: border-box;
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
greenfox07
@greenfox07 Автор вопроса
Вроде сделал так, как написали, но все равно где то ошибка

5b709865cdfe4777459328.jpeg

HTML

<div class="lookbook-cards">
	<a href="#" class="card col-3">
		<span class="small-price"><sup>ref</sup>m1</span>
		<img src="img/cards/lookbook/photo-1.jpg" alt="">
	</a>
	<a href="#" class="card col-3">
		<span class="small-price"><sup>ref</sup>w1</span>
		<img src="img/cards/lookbook/photo-2.jpg" alt="">
	</a>
	<a href="#" class="card col-6">
		<img src="img/cards/lookbook/photo-3.jpg" alt="">
	</a>

	<a href="#" class="card col-3">
		<span class="small-price"><sup>ref</sup>w1</span>
		<img src="img/cards/lookbook/photo-4.jpg" alt="">
	</a>
	<a href="#" class="card col-3">
		<span class="small-price"><sup>ref</sup>w1</span>
		<img src="img/cards/lookbook/photo-5.jpg" alt="">
	</a>
	<a href="#" class="card col-3">
		<span class="small-price"><sup>ref</sup>w1</span>
		<img src="img/cards/lookbook/photo-6.jpg" alt="">
	</a>
	<a href="#" class="card col-3">
		<span class="small-price"><sup>ref</sup>w1</span>
		<img src="img/cards/lookbook/photo-7.jpg" alt="">
	</a>
				
	<a href="#" class="card col-9">
		<img src="img/cards/lookbook/photo-8.jpg" alt="">
	</a>
	<a href="#" class="card col-3">
		<span class="small-price"><sup>ref</sup>w1</span>
		<img src="img/cards/lookbook/photo-9.jpg" alt="">
	</a>
</div>


CSS

.lookbook-cards {
	display: flex;
	flex-wrap: wrap;
	position: relative;
	padding-bottom: 52px;
	margin: 0 -10px;

	&::after {
		.line;
		bottom: 0;
	}
}

.col-3 {
  flex: 1 0 0;
  max-width: 25%;
  margin: 10px 10px;
}
.col-6 {
  flex: 2 0 0;
  max-width: 50%;
  margin: 10px 10px;
}
.col-9 {
  flex: 3 0 0;
  max-width: 75%;
  margin: 10px 10px;
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы