Как выстроить блоки друг за другом, не зависимо от их количества в строке?

Question

подскажите пожалуйста как выстроить блоки друг за другом, не зависимо от их количества в строке (учитывая что у всех у них есть обертка (.flex-test)). Можно ли такое сделать флексами или css гридом ?

.container.flex-test-wrap{display:flex;flex-wrap:wrap}
.flex-test{display:inline-flex;flex-wrap:wrap}
.flex-test-item{width:30vw;height:15vw;background:steelblue;margin:.5vw}
.flex-test.two .flex-test-item{background:coral} 
.flex-test.three .flex-test-item{background:lightgreen}

	<div class="container flex-test-wrap">
		<div class="flex-test">
			<div class="flex-test-item"></div>
		</div>
		<div class="flex-test two">
			<div class="flex-test-item"></div>
			<div class="flex-test-item"></div>
			<div class="flex-test-item"></div>
		</div>
		<div class="flex-test three">
			<div class="flex-test-item"></div>
			<div class="flex-test-item"></div>
			<div class="flex-test-item"></div>
		</div>
	</div>

проще говоря, надо сделать как на картинке, не меняя структуру html

Answer 1

Есть только костылем...

.container.flex-test-wrap {
  display: flex;
  flex-wrap: wrap
}

.flex-test {
  display: inline-flex;
  flex-wrap: wrap
}

.flex-test-item {
  width: 30vw;
  height: 15vw;
  background: steelblue;
  margin: .5vw
}

.flex-test.two .flex-test-item {
  background: coral
}

.flex-test.three .flex-test-item {
  background: lightgreen
}


/* костыль */

.flex-test.two .flex-test-item:nth-child(1),
.flex-test.two .flex-test-item:nth-child(2),
.flex-test.three .flex-test-item:nth-child(1),
.flex-test.three .flex-test-item:nth-child(2) {
  transform: translate(31vw, -16vw);
}

.flex-test.two .flex-test-item:nth-child(3),
.flex-test.three .flex-test-item:nth-child(3) {
  transform: translateX(-62vw);
}

<div class="container flex-test-wrap">
  <div class="flex-test">
    <div class="flex-test-item"></div>
  </div>
  <div class="flex-test two">
    <div class="flex-test-item"></div>
    <div class="flex-test-item"></div>
    <div class="flex-test-item"></div>
  </div>
  <div class="flex-test three">
    <div class="flex-test-item"></div>
    <div class="flex-test-item"></div>
    <div class="flex-test-item"></div>
  </div>
</div>

Answer 2

Мне кажется, мы стали забывать про старые добрые свойства display: inline и inline-block.

.container.flex-test-wrap {

}

.flex-test {
  display: inline;
}

.flex-test-item {
  width: 30vw;
  height: 15vw;
  background: steelblue;
  margin: .5vw;
  display: inline-block;
}

.flex-test.two .flex-test-item {
  background: coral;
}

.flex-test.three .flex-test-item {
  background: lightgreen;
}

<div class="container flex-test-wrap">
  <div class="flex-test">
    <div class="flex-test-item"></div>
  </div>
  <div class="flex-test two">
    <div class="flex-test-item"></div>
    <div class="flex-test-item"></div>
    <div class="flex-test-item"></div>
  </div>
  <div class="flex-test three">
    <div class="flex-test-item"></div>
    <div class="flex-test-item"></div>
    <div class="flex-test-item"></div>
  </div>
</div>

БЛОГ НА HUSL

Как выстроить блоки друг за другом, не зависимо от их количества в строке?

Ответы (2 шт):