que - rejillas en css

Posicionar elementos flexibles uno encima del otro en la cuadrícula sin envolverlos

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Es posible que los artículos flexibles se alineen estrechamente con los artículos que están sobre ellos? 5 respuestas
• Haz que un div abarque dos filas en una cuadrícula 2 respuestas

Tengo el siguiente diseño usando flexbox:

Quiero que el div contenga 2 en el lado derecho, y el Team y los Scorers deben compensar el espacio a la izquierda del mismo.

Diseño requerido:

Es la misma idea que el 2 div que tiene un rowspan de 2, si usa una tabla.

¿Hay alguna manera de posicionar Team y Scorers a la izquierda de 2 sin envolverlos en su div? Si es así, ¿vale la pena el problema?

Aquí está mi CSS hasta ahora:

.container {
  max-width: 600px;
}

.team {
  background-color: chartreuse;
}

.score {
  background-color: brown;
}

.scorers {
  background-color: steelblue;
}

.cards-desktop {
  background-color: goldenrod;
}

.carded-players {
  background-color: darkorange;
}

.left-col {
  display: flex;
  flex-flow: row wrap;
}
.left-col > * {
  flex: 1 100%;
}

.team {
  order: 1;
}

.score {
  order: 3;
}

.scorers {
  order: 2;
}

.cards-desktop {
  order: 4;
}

.carded-players {
  order: 5;
}

.team {
  flex: 1 auto;
}

.score {
  flex: 0 150px;
  font-size: 60px;
}

El diseño será diferente en otros puntos de interrupción, por lo que quiero tener un bloque HTML que no se duplique o imite para otros puntos de interrupción. Es por eso que no quiero envolver estos dos div en un contenedor, porque no es necesario en los diseños de otros puntos de interrupción.

Enlace Codepen

Answer 1

Aquí..

Ajustar 1, 2 y 3 en su propio div con display:flex / flex-direction:column / flex-wrap:wrap .

A continuación, establezca los anchos en los diversos componentes para adaptarse.

Desafortunadamente, creo que Chrome requiere una altura fija en esa envoltura para forzar la envoltura (creo que es un error) ... y ahí lo tiene.

* {
  box-sizing: border-box;
}
.team {
  background: chartreuse;
}
.score {
  background: brown;
}
.scorers {
  background: steelblue;
}
.cards-desktop {
  background: goldenrod;
}
.carded-players {
  background: darkorange;
}
.wrap {
  width: 80%;
  margin: auto;
  display: flex;
  flex-direction: column;
}
.top > div {
  padding: 5px;
}
.bottom > div {
  height: 25px;
}
.top {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 150px;
}
.team,
.scorers {
  height: 50%;
  width: 75%;
}
.score {
  width: 25%;
  flex: 1 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

<div class="wrap">
  <div class="top">
    <div class="team">Team</div>
    <div class="scorers">Scorers</div>
    <div class="score">
      <h1>2</h1>
    </div>
  </div>
  <div class="bottom">
    <div class="cards-desktop">cards-desktop</div>
    <div class="carded-players">carded-players</div>
  </div>
</div>