使用嵌套 flexbox div 的日历布局 - 容器不堆叠

Question

我正在尝试创建一个日历 header 使用 flexbox 来布局年、月、日，但我无法实现预期的结果。

我做错了什么？这是我构建 HTML 的方式还是我在 CSS 中遗漏了什么？

预期结果与此类似：

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

删除了 .flex class 替换为 .eqWrap（个人偏好，因为我添加了 eqHW 以获得相同的高度和宽度），您的问题之一是使用 flex-flow:row nowrap;。我看到的另一个问题是您没有将 flex-boxes 设置为等宽和等高。我也去掉了当天的宽度 class。我看到的 HTML 代码问题是您没有将所有月份放在一起，然后将日期放在一起，然后将所有内容组合在一个弹性框中 div，这也会导致所有内容都显示在一行中。

<div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre><code>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>

使用嵌套 flexbox div 的日历布局 - 容器不堆叠

Calendar layout using nested flexbox divs - containers not stacking

html

css

calendar

flexbox