如何在辅助轴上设置弹性基础

Question

如何使弹性项目在辅助轴上缩小？

例如，我有容器内有很多物品。它们都位于列中，但我希望它们的宽度也可以缩小：

.container {
  display: flex;
  flex-direction: column;
  .item {
    width: 200px;
    flex: 0 1 @item-height;
    //flex-shrink here means Y-axis. How to set flex-shrink for X-axis??
  }
}

Answer 1

交叉空间或交叉尺寸是根据layout algorithm计算的：

  

确定弹性项目的可用主空间和交叉空间。对于   每个维度，如果伸缩容器的内容框的维度是   是确定的大小，使用该大小；如果伸缩容器的尺寸   在最小或最大内容约束下确定尺寸，可用   在那个维度上的空间就是那个约束；否则，减去   从可用空间中伸缩容器的边距，边框和填充   到该维度中的flex容器并使用该值。 这可能   导致无限值。

https://www.w3.org/TR/css-flexbox-1/#layout-algorithm

横轴受align-items影响，并且受width，max-width，height，max-height等影响：{{3} }

因此，对于横轴上的等效于flex-shrink，您可以尝试使用align-items，而对于flex-basis则可以使用百分比max-widths / max-heights。

Answer 2

您只需在width: 100%; max-width: 200px;上使用.item即可。这应该会导致您的项目缩小到父元素的宽度，当它低于200px时。否则物品的宽度保持在200px。

至少在不使用flex-wrap的情况下起作用。