当前位置: 首页 > 知识库问答 >
问题:

React Native:如何使用FlexBox创建“网格”布局?

范玄裳
2023-03-14

我想要一个3xN布局在我的移动React Native应用程序,所以像这样的东西:

[    ] [    ] [    ]    
title1 title2 title3    
                        
[    ] [    ] [    ]
title4 title5 title6

[    ] [    ] [    ]
title7 title8 title9

...    ...    ...

整个布局,垂直的,将在滚动视图,这样即使它加载的项目超过一个屏幕可以显示,它可以正确地显示它的整体。

共有1个答案

萧心水
2023-03-14

只需在容器上设置flexwrap:'wrap',如果您希望每行的项目数恒定,则为您的项目设置flexbasis:'33%'而不是静态值,以确保设备的宽度适当缩放

 类似资料:
  • 问题内容: 我想在CSS中使用大小均相同但高度不相同的元素来实现网格效果。我希望下面的元素始终位于底部元素的50px处,无论接下来是什么。 我尝试使用浮点数,但该错误。因此,我尝试使用Flex,但是它仍然无法满足我的要求。 问题答案: Try the new CSS Grid Layout 建立一个块级网格容器。该grid-auto-rows属性设置自动生成的行的高度。在此网格中,每行高度为50p

  • 问题内容: 有没有办法利用Bootstrap 4随附的flexbox网格来创建砌体柱布局?在我看来,所有的列都是相等的高度。 问题答案: 这对于标准的Bootstrap 4类几乎是可行的。文档中甚至有一整节关于“证件栏”功能。 从文档中: 只需将CSS包裹在中,就可以使用CSS将 卡片组织成类似于砌体的列。卡是使用列属性而不是flexbox构建的,以便于对齐。卡的排列顺序是从上到下,从左到右。 小

  • 问题内容: 我想这样布局我的JPane: 这样,顶部比底部更大/更小(顶部由另一个JPanel组成,并使用Graphics对象显示图像,而底部也由另一个JPanel组成,但使用Graphics对象绘制一些线和文字)。 我听说最好的方法是使用GridBagLayout和GridBagConstraints。 我试图找出GridBagConstraints的适当属性,但遇到了一些困难。这是我到目前为止

  • 是否寻求创建适合多种屏幕的反应迅速的网站?了解如何在 Dreamweaver 中使用流体网格设计适合移动设备和桌面设备的网站。 网站的布局必须对显示该网站的设备尺寸作出响应与调整(响应性设计)。流体网格布局为对应显示该网站的设备而创建不同布局提供了可视化方式。 例如,将在桌面计算机、平板电脑和移动电话上查看您的网站。可使用流体网格布局为其中每种设备指定布局。根据在桌面计算机、平板电脑还是移动电话上

  • 在 React Native 中使用 flexbox 规则来指定某个组件的子元素的布局。 flexbox 可以在不同屏幕尺寸上提供一致的布局结构。 一般来说,使用 flexDirection、alignItems 和 justifyContent 三个样式属性就已经能满足大多数布局需求。 React Native 中的 flexbox 的工作原理和 web 上的 css 基本一致,当然也有差异。首

  • 我想创建一个有2列的循环布局。应该有一个变量有2列them.Clicking它们应该会显示祝酒词