当前位置:首页 > 博文 > 正文

学习Flex布局总会遇到的困惑

三棍先生 · 博文 · Aug 24, 2024

      学习HTML+CSS用Flex布局的过程中,开始的时候觉得Flex很多属性是重复的,无非是横向排列和纵向排列,很不理解这么多排列属性,究竟有什么意义?当用Flex做九宫格的时候,终于有点理解所有属性的意义了。

2.jpg

       justify-content 处理主轴方向上的对齐和空间分配,而 align-items 处理交叉轴方向上的对齐。即使在某些情况下,center 和 flex-start 在视觉上可能看起来相似,但它们分别影响主轴和交叉轴上的对齐。

      Flex布局的核心在于轴线,通过理解主轴和交叉轴的概念,以及如何使用相关的对齐属性,你可以更有效地控制 flex 布局中的元素位置和对齐方式。

1.jpg

      在 flex 布局中,主轴和交叉轴是核心概念。主轴的方向取决于 flex-direction 属性(如 row 或 column),而交叉轴则垂直于主轴。某些属性在不同轴上的效果可能看起来类似,但实际上它们分别处理主轴和交叉轴的对齐。

      Flex 布局中的一些属性可能看起来重复,但它们实际上针对不同的轴线、元素和布局需求提供了细化的控制。理解这些属性如何在主轴和交叉轴上发挥作用,有助于更精确地控制布局效果。

扫描截图二维码分享

Top