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>
等。 - 特性:
- 只能设置左右的边距和填充,无法设置宽度和高度。
- 内联元素的宽度由其内容决定,不会换行。
- 在文档流中,内联元素之间不会产生换行
- 定义:
- Block:
position
属性用于控制元素的定位方式(如static
、relative
、absolute
、fixed
和sticky
)。如果不设置position,默认为static,这意味着该元素将遵循正常的文档流,而不会受到任何定位的影响。- Block:
- 定义:
display: block;
的元素会在新的一行上开始并占据整个可用宽度,直到遇到下一个块级元素。常见的块级元素包括<div>
、<h1>
、<p>
等。 - 特性:
- 可以设置宽度和高度。
- 默认情况下,块级元素的宽度为其父元素的 100%。
- 在文档流中,块级元素之间会有换行。
- 定义:
- Block:
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
,可能不会产生预期的效果。