I'm creating a custom Date picker in Angular. I'm following this YouTube tutorial. I read Complete guide to Flexbox also. The tutor straightaway started using flex-container in his HTML code. No bootstrap nothing. Anyway, I followed him exactly. The output that He's getting on his screen is:
.
But I'm not getting any grid like structure. For me it is:
Here is my HTML code app.component.html:
html,
body {
height: 100%;
font-family: Arial, Helvetica, sans-serif;
background: #d3d3d3;
}
a.active {
background-color: gray;
}
#calendar-container {
width: 462px;
}
.calendar-days {
width: 60px;
height: 60px;
background: #669999;
border: 3px solid #c2c2c2;
}
.inactive {
opacity: 0.6;
}<div class="flex-container flex-center"><div id="calendar-container" class="flex-container flex-column flex-center"><div class="flex-container flex-center-horz"><div>
November</div></div><div class="flex-container"><div class="calendar-days flex-container flex-center">Sun</div><div class="calendar-days flex-container flex-center">Mon</div><div class="calendar-days flex-container flex-center">Tue</div><div class="calendar-days flex-container flex-center">Wed</div><div class="calendar-days flex-container flex-center">Thu</div><div class="calendar-days flex-container flex-center">Fri</div><div class="calendar-days flex-container flex-center">Sat</div><div class="calendar-days flex-container flex-center">Sun</div></div></div></div>I'm not able to figure out what's wrong with my code. I tried this on Chrome, Firefox and IE but same results. Please correct me.