Bố cục lịch bằng cách sử dụng divbox lồng nhau - ngăn chứa không xếp chồng

Question

Tôi đang cố gắng tạo tiêu đề lịch bằng flexbox cho bố cục của năm, tháng, ngày mặc dù tôi gặp sự cố khi đạt được kết quả mong muốn.

Tôi đang làm gì sai? Có phải đó là cách tôi đã cấu trúc HTML hoặc tôi thiếu một cái gì đó trong CSS?

Kết quả mong đợi là một cái gì đó tương tự như sau:

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

Removed lớp .flex thay thế bằng .eqWrap (sở thích cá nhân kể từ khi tôi thêm eqHW cho chiều cao bình đẳng và chiều rộng), một trong những vấn đề của bạn là do sử dụng dòng chảy flex: row nowrap ;. Một vấn đề khác tôi thấy là bạn đã không đặt các hộp flex có chiều rộng và chiều cao bằng nhau. Ngoài ra tôi đã thoát khỏi chiều rộng trên lớp ngày. Các vấn đề mã HTML tôi thấy là bạn đã không đặt tất cả các tháng với nhau, và sau đó những ngày với nhau và bạn kết hợp tất cả mọi thứ trong một div hộp flex, mà cũng gây ra tất cả mọi thứ xuất hiện trên một dòng.

             
  
 
   
 
    
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>