我们如何计算“弹性基准：自动和最小宽度”和“横轴宽度”？

Question

我想知道flex-basis: auto & min-width: 0和width: auto的计算方式（未为父元素和弹性项目设置 width ）。因此，我确认了W3C的规格。我的理解是否正确？

---

flex-basis: auto（没有为父元素定义宽度，设置了min-width: 0）

我将阅读本部分（7.1. The flex Shorthand）。然后，我发现在flex-basis: content时使用了 flex-basis: auto 。 flex-basis: content的计算值似乎在9. Flex Layout Algorithm一章中进行了描述。

  

自动

     

在flex项目上指定时，auto关键字将检索main size属性的值作为使用的flex-basis。 如果该值本身是自动的，则使用的值为内容。

     

内容

     

表示基于弹性项目内容的自动尺寸。 （它通常等效于最大内容大小，但需要进行调整以处理纵横比，固有的大小限制和正交流；请参阅§9Flex布局算法中的详细信息。）

我已经读过第9章。然后我知道与flex-basis相关的子句是9.2.3-C Line Length Determination。

  

如果使用的flex基础是内容或取决于其可用空间，并且在最小内容或最大内容约束下（例如，在执行自动表格布局[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-WRITING-MODES]。弹性基本尺寸是商品的最大内容量主尺寸。

.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. Cross Size Determination中。

  

确定每个弹性项目的已使用交叉尺寸。如果弹性项目具有align-self：Stretch，其计算的交叉尺寸属性为auto，并且其交叉轴边距都不是auto，则使用的外部十字尺寸是其弹性线的已使用十字尺寸，并根据该项目的宽度进行钳位使用的最小和最大十字尺寸。 否则，使用的十字尺寸是商品的假定十字尺寸。

“假设的交叉尺寸”在9.4.7. Cross Size Determination.

中进行了说明

  

通过使用所使用的主要尺寸和可用空间进行布局来确定每个项目的假设交叉尺寸，将自动处理为适合内容。

.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中的换行符？

Answer 1

首先，flex-basis属性没有“ content”值。它仅支持这四个值“数字，自动，初始和继承”。如果我的回答有任何错误，请通知我，根据您的反馈意见，我会提高我的知识。谢谢... 更多信息-https://www.w3schools.com/cssref/css3_pr_flex-basis.asp