是否有与“ flex-grow”属性（或“ flex”）相对的跨轴副本，该属性仅影响主轴？

Question

在Flexbox中，有“主轴”和“横轴”的概念。通常，在浏览器中，“主轴”是水平的，大概是因为台式机和笔记本电脑的屏幕通常是横向的；而在React Native中，“主轴”通常是垂直的，因为它主要用于电话，而电话通常是纵向。这些中的任何一个都称为“主轴”，另一个则称为“横轴”。

似乎在Flexbox中，许多影响主轴的属性也有一个对应的名称，其名称会影响横轴。

有一个叫做的属性flex-grow，另一个叫做的属性flex可以同时完成flex-grow和其他一些工作。

我不清楚的是这是否flex-grow是具有对应项的属性之一，还是一个例外。这同样适用于该flex财产。

原因之一，我想问的是，我经常读，试图让你的布局时的权利，你可以在线阅读，你可能需要设置flex到1你的元素及其所有计数器/父元素。但是，在布局中哪些位置需要实现相同的目标，但在横向方向又如何呢？

Answer 1

的flex-grow（和速记flex）属性总是影响主轴线，具有没有对应，并设置如何水平分布的自由空间为柔性行方向和垂直方向上为柔性列方向。

相比之下，例如，该justify-content属性影响主轴，而该属性影响主轴，则align-items影响交叉轴，两者均设置弹性项目的对齐方式。

但是，这里令人困惑的是，基于流动方向，它们会水平或垂直地影响柔韧性项目。

请注意，主轴和横轴与屏幕是宽还是高无关。

它与流向有关，因此对于默认的flex行方向，主轴是水平的，交叉轴是垂直，对于flex列方向，主轴是垂直的，交叉轴是水平。

一篇非常好的文章是《 Flexbox的完整指南》，其中对此进行了更全面的解释。

Answer 2

如果您想修改横轴上的 Flex 项目（默认情况下为垂直修改，如果 Flex 容器已flex-direction: column;设置则为水平修改），请考虑使用该align-self属性。要使弹性项目在横轴方向上“增长”，align-self: stretch;该项目应该可以工作。仅当容器已align-items设置为类似center.

请注意，这与横轴上的“flex-grow”类似，但绝对不是同一件事。有关更多详细信息，请参阅完整指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.container {
  display: flex;
  background-color: tan;
  align-items: center;
}

.small-stretched-item {
  background-color: green;
  align-self: stretch;
}

.tall-item {
  height: 200px;
  background-color: orange;
 }
 
 .small-unstretched-item {
   background-color: pink;
 }

<div class="container">
  <span class="small-stretched-item">Small, stretched item</span>
  <div class="tall-item">Tall item</div>
  <span class="small-unstretched-item">Small, unstretched item</span>
</div>