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

Question

我正在尝试使用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

删除了用.eqWrap替换的.flex类（个人偏好，因为我添加了eqHW的高度和宽度相同），你的一个问题是由于使用flex-flow引起的：row nowrap;。我看到的另一个问题是你没有将柔性盒设置为宽度和高度相等。我也摆脱了课堂上的宽度。我看到的HTML代码问题是你没有把所有的几个月放在一起，然后将这些日子放在一起，你把所有东西组合在一个弹性框div中，这也导致一切都出现在一行上。

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>