"flex-grow" 属性（或"flex"）是否有仅影响主轴的交叉轴对应项？

Question

Flexbox中有"main-axis"和"cross-axis"的概念。通常在浏览器上 "main-axis" 是水平的，大概是因为台式机和笔记本电脑的屏幕通常是横向的，而在 React Native 中，"main-axis" 通常是垂直的，因为它主要用于手机，而手机最常见在纵向方向。无论哪个是 "main-axis"，另一个都称为 "cross-axis"。

似乎在 Flexbox 中许多影响主轴的属性都有一个具有不同名称的对应物影响横轴。

有一个名为 flex-grow 的属性和另一个名为 flex 的 flex 可以同时完成 flex-grow 和其他一些人的工作。

我不清楚这个 flex-grow 是否是具有对应项的属性之一，或者它是否是一个例外。 flex 属性.

也是如此

我问的一个原因是，我经常读到，当试图让你的布局正确时，你可以在线阅读你可能需要为你的元素及其所有元素设置 flex 到 1 counter/parent 个元素。但是布局中哪些地方需要实现相同的目标，但在横轴上呢？

Answer 1

flex-grow（以及shorthandflex）属性总是影响主轴，有no 对应项，并设置如何为 flex 行方向 水平分配空闲 space 并为 flex 列方向[=] 垂直分配空闲 space 44=].

相比之下，例如justify-content 属性影响主轴，有对应的align-items影响交叉轴，其中两者都设置了弹性项目的对齐方式。

虽然这里可能会造成混淆，但基于流向它们会水平或垂直影响弹性项目。

注意，主和横轴与屏幕宽高无关

它与流向有关，因此对于默认的灵活行方向，主轴是水平的，横轴是垂直的，对于弹性列方向，主轴是垂直的，横轴是水平的。

一篇非常好的文章是A Complete Guide to Flexbox，它解释得更透彻。

Answer 2

如果您想修改 cross-axis 中的弹性项目（默认情况下是垂直的，或者如果弹性容器设置了 flex-direction: column; 则水平修改）然后考虑使用 align-self 属性。要使弹性项目在横轴方向上“增长”，该项目上的 align-self: stretch; 应该有效。这仅在容器已将 align-items 设置为 center.

时才有用

请注意，这与横轴上的“

”相似，但绝对不是一回事。有关详细信息，请参阅完整指南：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>

"flex-grow" 属性（或"flex"）是否有仅影响主轴的交叉轴对应项？

Is there a cross-axis counterpart to the "flex-grow" property (or "flex"), which affects only the main-axis?

css

layout

terminology

flexbox