前端格式（自己记录）

display和position可以独立设置，且可以结合使用以实现复杂的布局。

• display 属性用于控制元素的显示类型（如 block、inline、flex 等）
  •  Block：
    • 特性：
      • 可以设置宽度和高度。
      • 默认情况下，块级元素的宽度为其父元素的 100%。
      • 在文档流中，块级元素之间会有换行。
    • 定义：display: block; 的元素会在新的一行上开始并占据整个可用宽度，直到遇到下一个块级元素。常见的块级元素包括 <div>、<h1>、<p> 等。
  • Flex：
    • 定义：display: flex; 将元素定义为一个 flex 容器，允许其子元素（flex 项）在一个方向上灵活排列。flexbox 主要用于创建响应式布局。
    • 特性：
      • 子元素的排列可以通过 flex-direction 属性控制（如 row 或 column）。
      • 可以使用 flex-grow、flex-shrink 和 flex-basis 来控制子元素的大小和行为。
      • 默认情况下，flex 容器的主轴方向为水平方向（flex-direction: row）。
  • Inline：
    • 定义：display: inline; 的元素不会在新的一行上开始，而是与其他内联元素在同一行中显示。常见的内联元素包括 <span>、<a>、<strong> 等。
    • 特性：
      • 只能设置左右的边距和填充，无法设置宽度和高度。
      • 内联元素的宽度由其内容决定，不会换行。
      • 在文档流中，内联元素之间不会产生换行
• position 属性用于控制元素的定位方式（如 static、relative、absolute、fixed 和 sticky）。如果不设置position，默认为static，这意味着该元素将遵循正常的文档流，而不会受到任何定位的影响。
  • Block：
    • 定义：display: block; 的元素会在新的一行上开始并占据整个可用宽度，直到遇到下一个块级元素。常见的块级元素包括 <div>、<h1>、<p> 等。
    • 特性：
      • 可以设置宽度和高度。
      • 默认情况下，块级元素的宽度为其父元素的 100%。
      • 在文档流中，块级元素之间会有换行。

flexDirection: "row"

• 定义主轴方向：flexDirection: "row" 设置了 flex 容器的主轴方向为水平方向。子元素将沿着水平方向排列，默认情况下从左到右。
• 影响布局：这会影响所有子元素的布局方式，决定它们的排列顺序和方向。
• 默认值：在 Flexbox 中，flexDirection 的默认值是 row，这意味着如果不显式设置，子元素会默认水平排列。

flex={0}

• 设置弹性属性：flex={0} 是用于设置 flex 项的弹性属性。具体来说，flex 属性是一个简写，通常表示 flexGrow, flexShrink 和 flexBasis 的组合。
• 不允许扩展：设置 flex={0} 意味着该元素不会扩展以填充可用空间。它的 flexGrow 为 0，表示不允许该项增长；flexShrink 为 0，表示该项不可以缩小；flexBasis 默认为 auto，表示元素的基础大小是其内容的大小。
• 影响子元素的大小：使用 flex={0} 的元素将保持其内容的大小，不会因父容器的大小变化而改变

flexGrow

• 定义：flexGrow 指定了 flex 项在可用空间中应该占据多少比例。它定义了项目如何在主轴方向上扩展以填充容器的剩余空间。
• 值：flexGrow 接受一个非负的浮点值。默认值为 0，表示该项不会增长。如果多个子项的 flexGrow 值不同，容器会根据这些值的比例分配剩余空间。例如，如果一个项目的 flexGrow 值为 2，而另一个为 1，那么第一个项目将获得两倍于第二个项目的可用空间。

flexShrink

• 定义：flexShrink 指定了 flex 项在空间不足时应该如何缩小。它定义了项目在主轴方向上收缩的能力。
• 值：flexShrink 也接受一个非负的浮点值，默认值通常为 1。如果项目的总尺寸超过了容器的尺寸，flexShrink 值较大的项目将会比值较小的项目收缩得更多。如果设置为 0，该项目将不会缩小。

flexBasis

• 定义：flexBasis 定义了 flex 项的初始大小，即在计算 flexGrow 和 flexShrink 之前的基础大小。它可以被视为项目的默认大小。
• 值：flexBasis 可以是具体的长度值（如 200px）或百分比（如 50%），也可以是 auto，表示项目的大小将基于其内容的大小。

总结

这三个属性常常一起使用，通常通过 flex 属性进行简写：

• flex 是 flexGrow、flexShrink 和 flexBasis 的简写。例如，flex: 1 1 100px 表示该项目可以增长（flexGrow: 1）、可以缩小（flexShrink: 1），并且基础大小为 100px。
• 通过合理设置这三个属性，可以灵活控制布局中各个项目的大小和行为，确保在不同屏幕尺寸和容器大小下的良好适应性。

ScrollView

scrollView可以套在其他组件中

scrollView可以搭配position：fixed的使用

position: fixed：

• 固定定位的元素相对于浏览器窗口（viewport）（用户可见区域）进行定位。这意味着即使页面滚动，固定定位的元素也会保持在相同的位置。
• 同样使用 top、right、bottom 和 left 属性来指定元素的位置
• 参考点是浏览器窗口（viewport）。固定定位的元素始终相对于视口进行定位，不受其他元素影响。

ScrollView 有两个主要的样式属性：style 和 contentContainerStyle。paddingBottom 应该应用于 contentContainerStyle，而不是 style。如果将 paddingBottom 应用到 style，可能不会产生预期的效果。