Geek Answers Handbook

Calendar layout using nested flexbox divs - containers don't stack

I am trying to create a calendar title using flexbox to layout years, months, days, although I am having trouble achieving the expected result.

What am I doing wrong? Is this how I structured the HTML, or am I missing something in CSS?

The expected result is something like this:

enter image description here

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>
+5
source share
1 answer

Removed the .flex class, replaced by .eqWrap (personal preference, since I added eqHW for equal height and width), one of your problems was caused by using flex-flow: row nowrap ;. Another problem that I saw is that you did not set the flexible frames to equal width and height. I also got rid of the width in day class. The problems with the HTML code that I saw, you did not put all the months together, and then the days together, and you combined everything in one flexible div field, which also causes everything to appear on the same line.

 div { box-sizing: border-box; } .eqWrap { display: flex; } .year{ background: red; } .month { background: blue; } .day { background: green; } .month, .day, .year { border: 1px solid gray; text-align:center; } .equalHW { height:20px; 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>
>
0
source

More articles:


All Articles