学习笔记：FlexBox布局基础使用

1. flex项目是如何在flex中进行展示的？

• 水平或是垂直进行布局展示

2. 主轴侧轴起点的作用，其会被什么影响？

• 起点用于设置从左/右/上/下开始

• 其会依据阅读方向/书写模式而变化(writing-mode/direction)

3. 主轴尺寸的设置方式

• 直接设置width/height

• 使用逻辑属性 inline-size/block-size

• 尺寸限制的min-/max-

• width对应的是主轴尺寸；height对应侧轴尺寸

4. flex布局中出现剩余/不足空间，如何处理？

• 使用warp进行换行处理，默认不换行

• 换行会导致两行的项目未对齐

• 原因是flex是一维盒子，仅保证行或列的对齐

5 . order的作用？存在的问题？工作中的用处？

• 实现手动排序，设定order直接指定项目所在位置

• 当阅读屏幕时，会导致错乱

• 可能用于在页面重排数据，不建议使用

6.gap如何使用在工作中？

• gap和margin的用法一致，是flex的专属margin

• 可以直接取代margin来实现功能，简化样式代码

7. xxx:nth-child（2n）是如何产生作用的

• 对奇数的xxx类应用该样式

8. 设置当前页面的全局变量

• 当使用scope时，全局失效
  ：root{
  --flexDir：row
  }