Tengo una clase con 4 columnas diferentes.
div class="mainContent"> <div class="left-Col-1" *ngIf="data-1"> </div> <div class="left-Col-2" *ngIf="!data-1"> </div> <div class="right-Col-1" *ngIf="data-2"> </div> <div class="right-Col-2" *ngIf="!data-2"> </div> </div>Básicamente creé un flexbox donde muestro dos columnas. Si no hay data-1 en la primera columna, muestro div-right-2, y lo mismo sucede cuando no hay data-2, donde muestro div-left-2. Si ambos tienen datos, muestro div-left-1 y div-right-1. Mi css se ve así:
.mainContent > *:nth-child(1){ display: flex; flex-direction: column; flex-basis: 70%; padding: 0; } .mainContent > *:nth-child(2){ display: flex; flex-direction: column; flex-basis: 30%; padding: 0; }El problema es que quiero cambiar la base flexible al 50% en ambos div si no hay datos cargados (si el primer div es "left-div-2" y el segundo div "right-div-2"). ¿Es eso posible solo usando css o necesito escribir alguna función en mecanografiado?
Ty por tu ayuda.
Es posible que se esté confundiendo al usar un selector par/impar que no entiende. Su selector divide sus divs en hijos pares e impares y la única diferencia es que la base flexible es 70% para los impares y 30% para los pares. Con el cambio que está describiendo, tiene 3 valores diferentes para 4 clases diferentes, así que no use el par impar. Angular eliminará dos de esos divs según el contenido de data-1 de todos modos.
Dado que está utilizando cuatro clases diferentes para sus cuatro divs, también puede usarlas para especificar qué base flexible desea para cada una. Vea si puede entender lo que hace este css.
.mainContent{ display: flex; flex-direction: column; padding: 0; } .mainContent .left-Col-1{ flex-basis: 70%; } .mainContent .right-Col-1{ flex-basis: 30%; } .mainContent .left-Col-2, .mainContent .right-Col-2{ flex-basis: 50%; }Probablemente, lo mejor sería usar clases que sean más descriptivas, como lleno/vacío y primario/secundario. Eso haría que su código sea más claro y fácil de administrar.