Layout del calendario utilizzando div antidecubo nidificato - contenitori non impilabili

Question

Sto cercando di creare un'intestazione del calendario utilizzando flexbox per il layout degli anni, dei mesi, dei giorni anche se ho problemi a raggiungere il risultato previsto.

Cosa sto sbagliando? È così che ho strutturato l'HTML o mi manca qualcosa nel CSS?

risultato atteso è qualcosa di simile a questo:

div { 
 
    box-sizing: border-box; 
 
} 
 
.flex { 
 
    display: flex; 
 
    flex-flow: row nowrap; 
 
} 
 
.year, 
 
.month, 
 
.day { 
 
    border: 1px solid gray; 
 
    height: 20px; 
 
} 
 
.year { 
 
    background-color: red; 
 
} 
 
.month { 
 
    background-color: blue; 
 
} 
 
.day { 
 
    background-color: green; 
 
    width: 20px; 
 
}

<div class="flex"> 
 
    <div class="year flex">2015 
 
    <div class="month flex">Jan 
 
     <div class="day">01</div> 
 
     <div class="day">02</div> 
 
     <div class="day">03</div> 
 
     <div class="day">04</div> 
 
     <div class="day">05</div> 
 
     <div class="day">06</div> 
 
     <div class="day">07</div> 
 
     <div class="day">08</div> 
 
    </div> 
 
    <div class="month flex">Feb 
 
     <div class="day">01</div> 
 
     <div class="day">02</div> 
 
     <div class="day">03</div> 
 
     <div class="day">04</div> 
 
     <div class="day">05</div> 
 
     <div class="day">06</div> 
 
     <div class="day">07</div> 
 
     <div class="day">08</div> 
 
    </div> 
 
    <div class="month flex">Mar 
 
     <div class="day">01</div> 
 
     <div class="day">02</div> 
 
     <div class="day">03</div> 
 
     <div class="day">04</div> 
 
     <div class="day">05</div> 
 
     <div class="day">06</div> 
 
     <div class="day">07</div> 
 
     <div class="day">08</div> 
 
    </div> 
 
    </div> 
 
    <div class="year flex">2016 
 
    <div class="month flex">Jan 
 
     <div class="day">01</div> 
 
     <div class="day">02</div> 
 
     <div class="day">03</div> 
 
     <div class="day">04</div> 
 
     <div class="day">05</div> 
 
     <div class="day">06</div> 
 
     <div class="day">07</div> 
 
     <div class="day">08</div> 
 
    </div> 
 
    <div class="month flex">Feb 
 
     <div class="day">01</div> 
 
     <div class="day">02</div> 
 
     <div class="day">03</div> 
 
     <div class="day">04</div> 
 
     <div class="day">05</div> 
 
     <div class="day">06</div> 
 
     <div class="day">07</div> 
 
     <div class="day">08</div> 
 
    </div> 
 
    <div class="month flex">Mar 
 
     <div class="day">01</div> 
 
     <div class="day">02</div> 
 
     <div class="day">03</div> 
 
     <div class="day">04</div> 
 
     <div class="day">05</div> 
 
     <div class="day">06</div> 
 
     <div class="day">07</div> 
 
     <div class="day">08</div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Rimosso la classe .flex sostituito con .eqWrap (preferenza personale da quando ho aggiunto eqHW per la parità di altezza e larghezza), uno dei tuoi problemi è stato causato dall'uso del flex-flow: row nowrap ;. Un altro problema che ho notato è che non hai impostato le Flex-Box in modo uguale alla larghezza e all'altezza. Inoltre mi sono sbarazzato della larghezza nella classe del giorno. I problemi del codice HTML che ho visto sono stati che non hai messo insieme tutti i mesi, e poi i giorni insieme e hai combinato tutto in un div box flessibile, il che fa sì che tutto appaia su un'unica riga.

             
  
 
   
 
    
div { 
 
\t box-sizing: border-box; 
 
} 
 

 

 
.eqWrap { 
 
\t display: flex; 
 
} 
 

 
.year{ 
 
\t background: red; 
 
} 
 
.month { 
 
\t background: blue; 
 
} 
 
.day { 
 
\t background: green; 
 
} 
 

 
.month, .day, .year { 
 
\t border: 1px solid gray; 
 
\t text-align:center; 
 
\t 
 
} 
 
.equalHW { 
 
\t height:20px; 
 
\t flex: 1; 
 
}
 
    
<div class="equalHW year">2015</div> 
 
<div class="eqWrap"> 
 
    <div class="equalHW month">Jan</div> 
 
    <div class="equalHW month">Feb</div> 
 
    <div class="equalHW month">Mar</div> 
 
</div> 
 
    <div class="eqWrap"> 
 
    <div class="equalHW day">1</div> 
 
    <div class="equalHW day">2</div> 
 
    <div class="equalHW day">3</div> 
 
    <div class="equalHW day">4</div> 
 
    <div class="equalHW day">5</div> 
 
    <div class="equalHW day">6</div> 
 
    <div class="equalHW day">7</div> 
 
    <div class="equalHW day">8</div> 
 
    <div class="equalHW day">1</div> 
 
    <div class="equalHW day">2</div> 
 
    <div class="equalHW day">3</div> 
 
    <div class="equalHW day">4</div> 
 
    <div class="equalHW day">5</div> 
 
    <div class="equalHW day">6</div> 
 
    <div class="equalHW day">7</div> 
 
    <div class="equalHW day">8</div> 
 
    <div class="equalHW day">1</div> 
 
    <div class="equalHW day">2</div> 
 
    <div class="equalHW day">3</div> 
 
    <div class="equalHW day">4</div> 
 
    <div class="equalHW day">5</div> 
 
    <div class="equalHW day">6</div> 
 
    <div class="equalHW day">7</div> 
 
    <div class="equalHW day">8</div> 
 
</div> 
 
    
 
    <div class="equalHW year">2016</div> 
 
<div class="eqWrap"> 
 
    <div class="equalHW month">Jan</div> 
 
    <div class="equalHW month">Feb</div> 
 
    <div class="equalHW month">Mar</div> 
 
</div> 
 
    <div class="eqWrap"> 
 
    <div class="equalHW day">1</div> 
 
    <div class="equalHW day">2</div> 
 
    <div class="equalHW day">3</div> 
 
    <div class="equalHW day">4</div> 
 
    <div class="equalHW day">5</div> 
 
    <div class="equalHW day">6</div> 
 
    <div class="equalHW day">7</div> 
 
    <div class="equalHW day">8</div> 
 
    <div class="equalHW day">1</div> 
 
    <div class="equalHW day">2</div> 
 
    <div class="equalHW day">3</div> 
 
    <div class="equalHW day">4</div> 
 
    <div class="equalHW day">5</div> 
 
    <div class="equalHW day">6</div> 
 
    <div class="equalHW day">7</div> 
 
    <div class="equalHW day">8</div> 
 
    <div class="equalHW day">1</div> 
 
    <div class="equalHW day">2</div> 
 
    <div class="equalHW day">3</div> 
 
    <div class="equalHW day">4</div> 
 
    <div class="equalHW day">5</div> 
 
    <div class="equalHW day">6</div> 
 
    <div class="equalHW day">7</div> 
 
    <div class="equalHW day">8</div> 
 
</div>