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

Question

[greenfox07]

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

Как у меня:
Как надо:

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;
}

Answer 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;
}

Comments

[dom1n1k]

Правильнее будет марждины сделать марджинами, а не паддингами.
А флексовые свойства поменять с вида
flex: 0 0 75%;
на вид
flex: 3 0 0;

[Алекс Глебов]

dom1n1k, На велосипед похоже. Есть пример где это используется? сетка, фреймворк?

[dom1n1k]

Какой ещё велосипед? Это придумано не мной, а авторами спецификации flexbox, как раз для подобных случаев.

Answer 2

[greenfox07]

Вроде сделал так, как написали, но все равно где то ошибка



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;
}

Comments

[Алекс Глебов]

ссылку надо

[Алекс Глебов]

https://codepen.io/SkiperX/pen/YjgwLV
вот пример

[greenfox07]

Алекс Глебов, все получилось, спасибо большое