我们如何计算"柔性基础:自动和最小宽度"和"横轴宽度"？

Question

我想知道如何flex-basis: auto & min-width: 0和width: auto计算(width未设置父元素和Flex项目).因此,我确认了W3C的规格.我的理解如下吗？

---

flex-basis: auto(没有min-width: 0设置父元素的宽度定义)

我将阅读这一部分(7.1.弹性速记).然后我发现用的flex-basis: content是什么时候flex-basis: auto.计算值flex-basis: content似乎在第9章" 柔性布局算法"中描述.

汽车

在flex项上指定时,auto关键字将使用main size属性的值作为使用的flex-basis.如果该值本身是auto,则使用的值是content.

内容

表示基于弹性项目内容的自动大小.(它通常等同于最大内容大小,但通过调整处理宽高比,内部大小限制和正交流;请参阅§9Flex布局算法中的详细信息.)

我已经阅读了第9章.然后我知道有关的条款flex-basis是9.2.3-C线长确定.

如果所使用的柔性基础是内容或取决于其可用空间,和柔性容器被一分钟的内容或MAX-内容约束下的尺寸(例如,执行自动表的布局[CSS21]时),尺寸约束下的项目.flex基本大小是项目的主要大小.

.container {
  display: flex;
  border: 3px solid green;
  overflow-wrap: break-word;
}

.box1 {
  flex-basis: content;
  /* `flex-basis: auto` works the same way */
  border: 3px solid red;
}

<div class="container">
  <div class="box1">flex-basis: content texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</div>
</div>

但是,自设置以来min-width: 0,弹性项目的大小是根据9.2.3-D确定的.

否则,如果使用的flex基础是内容或取决于其可用空间,则可用的主要大小是无限的,并且flex项的内联轴与主轴平行,使用正交流中的框的规则来放置项目[CSS3-写入模式].flex基本大小是项目的最大内容主要大小.

.container {
  display: flex;
  border: 3px solid green;
  overflow-wrap: break-word;
}

.box1 {
  flex-basis: content;
  /* `flex-basis: auto` works the same way */
  border: 3px solid red;
  min-width: 0;
}

<div class="container">
  <div class="box1">flex-basis: content texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</div>
</div>

问题1.此弹性项目的main size(max-content)计算是否考虑了换行符word-wrap？

---

width: auto(在横轴上,align-items未设定stretch)

width横轴(flex-direction: column)的计算值似乎写在9.4.11中.交叉尺寸确定.

确定每个弹性项目的使用交叉大小.如果flex项目具有align-self:stretch,其计算的交叉大小属性为auto,并且其横轴边距均不是auto,则使用的外部交叉大小是其弹性线的使用交叉大小,根据项目的方式进行裁剪使用最小和最大交叉尺寸.否则,使用的交叉大小是项目的假设交叉大小.

"假设的交叉尺寸"在9.4.7中解释.交叉尺寸确定.

通过使用使用的主要大小和可用空间执行布局来确定每个项目的假设交叉大小,将auto视为适合内容.

.container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Set a value other than `align-items: stretch` */
  border: 3px solid green;
  overflow-wrap: break-word;
}

.box1 {
  border: 3px solid red;
}

<div class="container">
  <div class="box1">align-items: flex-start texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</div>
</div>

问题2.此弹性项目的cross size(fit-content)计算是否考虑了换行符word-wrap？