html - 使用嵌套 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; 引起的。我看到的另一个问题是您没有将 flex-boxes 设置为等宽和等高。我也摆脱了日间类(class)的宽度。我看到的 HTML 代码问题是您没有将所有月份放在一起，然后将日期放在一起，然后将所有内容组合在一个 flex box div 中，这也会导致所有内容都显示在一行中。

<div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code> <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></code></pre>
</div>
</div>