与flex-direction属性混淆

Question

默认情况下，沿主轴的弯曲方向为---->（从左到右）

当您将flex方向更改为行反向时，它变为<-----（从右到左），但是为什么它从flex容器的右侧开始？

Answer 1

灵活方向

  

它建立了主轴，从而定义了伸缩项目在伸缩容器中的放置方向。

     

伸缩容器的主轴是沿其放置伸缩项的主轴。当心，它不一定是水平的。这取决于flex-direction属性。

     

flex-direction属性接受4个不同的值：

     

  
• 行（默认）：与文本方向相同      
    
  • 后退：与文字方向相反
    
  • 列：与行相同，但从上到下
    
  • 列反向：从上至下与行反向相同
    
  

     

请注意，行和行的反向行受Flex容器的方向性的影响。 如果其文本方向为ltr，则row表示水平轴，该水平轴从左到右定向，并且行反转从右到左；如果方向是rtl，则相反。

Source

我相信这最后一段是你要问的。

Answer 2

当您镜像某些东西时，这是正常的行为。

如果您想让孩子们在左侧，可以做这个女巫justify-content: flex-end;

.flex-container {
  display:flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}