是否存在与“flex-grow”属性（或“flex”）对应的交叉轴，它只影响主轴？

Posted 2023-02-27

【中文标题】是否存在与“flex-grow”属性（或“flex”）对应的交叉轴，它只影响主轴？

【英文标题】：Is there a cross-axis counterpart to the "flex-grow" property (or "flex"), which affects only the main-axis?

【发布时间】：2018-03-07 03:37:57

【问题描述】：

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

似乎在 Flexbox 中，许多影响主轴的属性都有一个名称不同的对应项，它会影响交叉轴。

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

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

我问的一个原因是我经常读到，在尝试正确布局时，您可以在线阅读，您可能需要为您的元素及其所有计数器/父元素设置 flex 到 1。但是，您的布局中的哪些地方需要实现相同的目标，但在交叉轴上呢？

【问题讨论】：

这是display: grid 的来源吗？

【参考方案1】：

flex-grow（和简写的flex）属性总是影响主轴，有没有对应物，并设置如何水平分配空闲空间flex 行方向和垂直 flex 列方向。

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

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

---

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

它与流向有关，所以对于默认的flex行方向，主轴是水平的横轴是垂直的，对于一个flex列方向，主轴是垂直的，横轴 是水平的。

一篇非常好的文章是A Complete Guide to Flexbox，它更彻底地解释了这一点。

【讨论】：

关于你的笔记，这就是我说“一般”的原因。我想了想，它更多地是关于 web 与 React Native，但不记得我当时从哪里知道它。关于为所有父母指定 flex 的必要性以及让它工作的元素，我是对还是错？我会看看我是否能找到我从哪里得到的......

@hippietrail 您在 flex 项 上设置了flex 属性，它有一个带有display: flex 的父项、flex 容器，以及对于需要除默认 flex: 0 1 auto

之外的其他内容的每个项目

如果一些父母使用flex-direction: row而其他父母使用flex-direction: column，那没关系？ （我发布问题时不知道这些术语。）

@hippietrail 正确的是它只适用于 主轴，尽管您在 flex child 上设置了flex-grow，而不是 弹性父母。这个演示希望表明：jsfiddle.net/sy03ge9p/3

@hippietrail 我对 React 的不同解决方案知之甚少，但总体上对 Flexbox 的了解更多，尽管框架通常在所有框架上都重复 parent 和 child 属性嵌套的项目，以确保它在所有级别都能正常工作，这当然会造成一些混淆，当一个人深入研究特定技术时会发生什么。

【参考方案2】：

如果您想在横轴上修改弹性项目（默认为垂直，如果弹性容器设置了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>