que - rejillas en css
Posicionar elementos flexibles uno encima del otro en la cuadrícula sin envolverlos (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>
Esta pregunta ya tiene una respuesta aquí:
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.
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.