题目
Row组件中有两个Text组件,如果使用justifyContent对齐方式,下面哪个属性可以实现第一个元素到行首的距离和最后一个元素到行尾的距离A. FlexAlign.SpaceAroundB. FlexAlign.SpaceEvenlyC. FlexAlign.SpaceBetweenD. FlexAlign.Center
Row组件中有两个Text组件,如果使用justifyContent对齐方式,下面哪个属性可以实现第一个元素到行首的距离和最后一个元素到行尾的距离
A. FlexAlign.SpaceAround
B. FlexAlign.SpaceEvenly
C. FlexAlign.SpaceBetween
D. FlexAlign.Center
题目解答
答案
A. FlexAlign.SpaceAround
解析
本题考查Flex布局中justifyContent属性的对齐方式,核心在于理解不同对齐方式在两个子元素场景下的间距分配逻辑。关键点在于:
- FlexAlign.SpaceAround:元素均匀分布,首尾间距为相邻元素间距的一半;
- FlexAlign.SpaceBetween:首尾元素紧贴边界,中间无额外间距;
- FlexAlign.SpaceEvenly:所有间距(含首尾)均等分配;
- FlexAlign.Center:元素居中,首尾间距相等但无规律分配。
选项分析
A. FlexAlign.SpaceAround
- 逻辑:元素间间距相等,首尾元素到边界的距离为相邻间距的一半。
- 示例:若相邻间距为$d$,则首元素到行首、末元素到行尾的距离均为$\frac{d}{2}$,符合题意。
B. FlexAlign.SpaceEvenly
- 逻辑:所有间距(包括首尾到边界)均等分配。
- 示例:首尾间距与相邻间距相等,无法满足“首尾间距是相邻间距的一半”的要求。
C. FlexAlign.SpaceBetween
- 逻辑:首元素紧贴行首,末元素紧贴行尾,中间无额外间距。
- 结果:首尾到边界的距离为$0$,不符合题意。
D. FlexAlign.Center
- 逻辑:元素居中,剩余空间平均分配两侧。
- 结果:首尾到边界的距离相等,但无明确比例关系,无法满足条件。