Question

我正在尝试使用月份名称和该月份正好在名称下方的所有日子撰写标题。

Days items有固定的宽度，所以我想：为什么不使用flexbox？

由于某些原因，.day元素正在降低其父级，父级不会增长。

您能不能给我一个提示，说明为什么flex-basis: auto在数天之后不会使月插槽增长？插槽溢出了吗？

至于实施，我已经找到了使用float: left而不是使用flexbox的解决方法。但我无法理解为什么它会这样运作。

＆＃13;

.main {
  display: flex;
}

.month {
  flex: 0 0 auto;
}

.days {
  display: flex;
}

.day {
  flex: 0 0 2em;
}

＆＃13;

<div class='main'>
  <div class='month'>
    <div class='name'>Jan</div>
    <div class='days'>
      <div class='day'>1</div>
      <div class='day'>2</div>
      <div class='day'>3</div>
      <div class='day'>4</div>
      <div class='day'>5</div>
      <div class='day'>6</div>
    </div>
  </div>
  <div class='month'>
    <div class='name'>Feb</div>
    <div class='days'>
      <div class='day'>1</div>
      <div class='day'>2</div>
      <div class='day'>3</div>
      <div class='day'>4</div>
      <div class='day'>5</div>
      <div class='day'>6</div>
      <div class='day'>7</div>
      <div class='day'>8</div>
      <div class='day'>9</div>
      <div class='day'>10</div>
    </div>
  </div>
  <div class='month'>
    <div class='name'>Mar</div>
    <div class='days'>
      <div class='day'>1</div>
      <div class='day'>2</div>
    </div>
  </div>
</div>

＆＃13;

codepen：http://codepen.io/skyboyer/pen/MyzeLW

jsFiddle：https://jsfiddle.net/azizn/ytt7jb85/

Answer 1

使用width: 2em代替flex: 0 0 2em。

＆＃13;

.main {
  display: flex;
}
.month {
  flex: 0 0 auto;
}
.days {
  display: flex;
}
.day {
  width: 2em;
}

＆＃13;

<div class='main'>
  <div class='month'>
    <div class='name'>Jan</div>
    <div class='days'>
      <div class='day'>1</div>
      <div class='day'>2</div>
      <div class='day'>3</div>
      <div class='day'>4</div>
      <div class='day'>5</div>
      <div class='day'>6</div>
    </div>
  </div>
  <div class='month'>
    <div class='name'>Feb</div>
    <div class='days'>
      <div class='day'>1</div>
      <div class='day'>2</div>
      <div class='day'>3</div>
      <div class='day'>4</div>
      <div class='day'>5</div>
      <div class='day'>6</div>
      <div class='day'>7</div>
      <div class='day'>8</div>
      <div class='day'>9</div>
      <div class='day'>10</div>
    </div>
  </div>
  <div class='month'>
    <div class='name'>Mar</div>
    <div class='days'>
      <div class='day'>1</div>
      <div class='day'>2</div>
    </div>
  </div>
</div>

＆＃13;

您的代码存在的问题是Firefox和Chrome尺寸.month考虑了内容的宽度，但不考虑flex-basis。

＆＃13;

.main {
  display: flex;
}
.month {
  flex: 0 0 auto;
}
.days {
  display: flex;
  overflow: hidden;
}
.main.big .day {
  flex: 0 0 2em;
}
.main.big > .month:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  border: 1px solid red;
}

＆＃13;

<div class='main grow'>
  <div class='month'>
    <div class='name'>Jan</div>
    <div class='days'>
      <div class='day'>1</div>
      <div class='day'>2</div>
      <div class='day'>3</div>
      <div class='day'>4</div>
      <div class='day'>5</div>
      <div class='day'>6</div>
    </div>
  </div>
  <div class='month'>
    <div class='name'>Feb</div>
    <div class='days'>
      <div class='day'>1</div>
      <div class='day'>2</div>
      <div class='day'>3</div>
      <div class='day'>4</div>
      <div class='day'>5</div>
      <div class='day'>6</div>
      <div class='day'>7</div>
      <div class='day'>8</div>
      <div class='day'>9</div>
      <div class='day'>10</div>
    </div>
  </div>
  <div class='month'>
    <div class='name'>Mar</div>
    <div class='days'>
      <div class='day'>1</div>
      <div class='day'>2</div>
    </div>
  </div>
</div>
<hr />
<div class='main big'>
  <div class='month'>
    <div class='name'>Jan</div>
    <div class='days'>
      <div class='day'>1</div>
      <div class='day'>2</div>
      <div class='day'>3</div>
      <div class='day'>4</div>
      <div class='day'>5</div>
      <div class='day'>6</div>
    </div>
  </div>
  <div class='month'>
    <div class='name'>Feb</div>
    <div class='days'>
      <div class='day'>1</div>
      <div class='day'>2</div>
      <div class='day'>3</div>
      <div class='day'>4</div>
      <div class='day'>5</div>
      <div class='day'>6</div>
      <div class='day'>7</div>
      <div class='day'>8</div>
      <div class='day'>9</div>
      <div class='day'>10</div>
    </div>
  </div>
  <div class='month'>
    <div class='name'>Mar</div>
    <div class='days'>
      <div class='day'>1</div>
      <div class='day'>2</div>
    </div>
  </div>
</div>

＆＃13;

这是一个错误。根据{{3}}，当.month案例E适用Line Length Determination时：

使用其使用的determining the flex base size代替其available space将项目调整为flex basis，处理值为 main size为content。

计算最大内容大小的复杂性已移至CSS Sizing 4：

max-content：该框中的“理想”max-content inline size size。通常可以是最窄的inline axis 如果软包装的 none ，请在适合其内容的同时进行盒子里的机会被采取了。（见inline size。）

如果是§4 Intrinsic Size Determination，

non-replaced block的max-content inline size是布局后框的内联大小，如果所有子项的大小均为a block container box

在布局＆＃34;之后明确地说＆＃34;在flex layout＆＃34;之前，它没有说＆＃34;之类的东西。因此，flex-basis: 2em不应被忽略，并且应该有助于增加容器的最大内容大小。

嵌套的flex元素不会让父母成长

1 个答案: