React引导程序布局问题
是指在使用React框架进行开发时，如何进行页面布局的问题。在React中，可以使用多种方式来进行页面布局，包括使用CSS样式、使用Flexbox布局、使用Grid布局等。
- CSS样式：可以使用CSS样式来进行页面布局，通过设置元素的position、display、float、margin、padding等属性来控制元素的位置和大小。可以使用CSS的选择器来选择需要布局的元素，并设置相应的样式。
- Flexbox布局：Flexbox是一种用于页面布局的CSS3模块，它提供了一种灵活的方式来布局元素。通过设置容器的display为flex，可以将其内部的元素按照一定的规则进行布局。可以使用flex-direction、justify-content、align-items等属性来控制元素的排列方式和对齐方式。
- Grid布局：Grid布局是一种二维布局系统，可以将页面划分为行和列，并通过设置网格属性来控制元素的位置和大小。可以使用grid-template-columns、grid-template-rows、grid-column、grid-row等属性来定义网格的结构和元素的位置。
React还提供了一些布局库和组件，可以帮助开发者更方便地进行页面布局，例如：
- react-bootstrap：一个基于Bootstrap的React组件库，提供了一些常用的布局组件，如Container、Row、Col等，可以快速构建响应式布局。
- antd：一个基于React的UI组件库，提供了一些布局组件，如Grid、Layout等，可以方便地进行页面布局。
- Material-UI：一个基于Material Design的React组件库，提供了一些布局组件，如Grid、Container等，可以实现现代化的页面布局。
以上是一些常用的页面布局方法和相关的React组件库，可以根据具体的需求选择合适的方法和组件进行页面布局。
相关·内容
2回答
我有一个CSS网格，里面有一堆自动流的网格项目。有时网格项是1×1轨道，有时是2×2轨道，所以我从源顺序中不知道哪些项将在网格中处于特定位置。这意味着使用:nth-child()进行样式设计是不可靠的。
我想将样式添加到某些网格列(主要是最后一列)中的项中。是否有CSS选择器可以让我对这些项目进行样式设计？
例如，在这个演示中，我将如何样式框3，5和9，()？
.grid-container {
display:grid;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 1em;
浏览 2提问于2017-05-24得票数 11
1回答
基于柔性盒，工作非常好。然而，我试图了解使用它与CSS Grid相比是否有任何好处，而CSS网格也非常容易使用。实际上，我更喜欢CSS，但我不想通过使用它破坏系统的其余部分。它是否以任何方式干扰其他材料用户界面？
有什么见解吗？提前谢谢。
浏览 0提问于2020-08-13得票数 8
回答已采纳
4回答
我正在尝试创建一个像这样的视图的网格
使用聚合物--我应该如何处理--有很多事情让我感到困惑，这将是处理这种设计的最好方法--不管是用聚合物还是任何网络组件，这样就可以定制它，以及我应该如何使用它，任何链接或参考都会有很大的帮助，谢谢。
浏览 6提问于2017-08-31得票数 0
回答已采纳
例如，我想用Instagram这样的多个组件来构建react。来自HTML/CSS/JS -每个页面都有自己的设计和布局。现在react不改变页面，它只是呈现不同的组件，无论是登录页面、配置文件页、提要等等。现在我想知道如何在包含多个复杂组件的react应用程序中实现css网格。我应该在App.js上做一个网格布局，以保存所有的主要组件，如寄存器、登录、提要等，还是应该为用作“页面”的每个组件创建一个网格(注册、登录、提要等)&只需忽略App.js样式？
编辑-每个组件将有一个不同的外观，例如，注册页面将有一个注册表单，登录页面将有一个不同的外观形式和设计提要是一个组件，将显示标题和用
浏览 1提问于2021-03-11得票数 2
我正在研究在React应用程序中设置页面样式的最佳方式。我在react中看到了很多可以样式化的库，比如Styled Components，Glamor，CSS Modules。
在我目前的项目中，我正在使用CSS模块(主要是为了摆脱css冲突和页面特定的CSS)。我用谷歌搜索了很多关于为什么我应该使用样式组件和CSS-in-JS的问题，但我没有得到任何具体的答案。所以我的问题是，使用CSS-in-JS或样式组件是否有实际的性能优势，或者它只是语法上的糖。
浏览 0提问于2018-09-19得票数 26
我很难使用CSS在屏幕上集中我的组件。
见我的App.js
import { Container } from 'native-base';
import React from 'react';
import { StyleSheet } from 'react-native';
import Screen from './ScreenContainer';
const styles = StyleSheet.create({
container: {
backgroundColor: '#FF6666&#
浏览 5提问于2018-04-22得票数 18
回答已采纳
2回答
我正在学习HTML & CSS，现在我正在学习CSS网格。
我想我正在理解CSS网格是如何工作的，我一直在尝试编写一个网站，其中的一个方框项目位于网格中的特定位置。
我拍了一张截图，画了一个方格，在那里我试图定位集装箱箱项目。我一直在尝试用网格列和网格行来定位它，现在有效了。
(那个黑色的实心长方形应该是在看集装箱盒的油漆图纸)
这是我的密码：
body {
background: #aaa;
}
html,
body,
.header-bar {
height: 100%;
margin: 0;
}
.header-grid {
display: g
浏览 1提问于2019-01-24得票数 0
回答已采纳
3回答
在MUI Grid中，为了垂直间隔网格项，我在网格容器中提供了间距。它在大屏幕上看起来不错，但在移动设备上，它导致网格项目之间的水平间距很尴尬。
<Grid container spacing={24}>
<Grid item xl={6} md={6} sm={12} xs={12}>
<TextField
required
id="outlined-email-input"
label="Customer Name"
name="email"
浏览 1提问于2019-08-11得票数 19
2回答
我使用的是一个叠加在分页工具栏( vaadin-grid - pagination )上的vaadin- grid，我遇到的问题是，在移动设备上，当网格经过视区时，分页并不在视区的底部。 ? 理想情况下(忽略分页溢出)，它应该是这样的： ? 现在，通过Dev Tools检查器，我可以从滚动条中删除一个position: relative属性，这样就可以让事情按照我想要的那样运行。 ? 问题是我无法通过编程来做到这一点……我尝试使用包含以下内容的自定义css文件： :host() #scroller {
width: 100%;
height:
浏览 31提问于2021-11-04得票数 1
回答已采纳
我是第一次接触react-native。构建一个Hello World应用程序，让我精通原生的react。在屏幕上，我希望有一个文本框，在它下面有一个按钮，在按钮下面有一个文本区域，它将占据屏幕的其余部分。我不知道我该怎么做。
浏览 2提问于2019-04-23得票数 3
我想用这样的边界树建立一个网格：
网格
grid__row
网格列群
grid__column
也有类似这个挑逗块的内容。
挑逗
teaser__thumbnail
teaser__headline
teaser__body
teaser__link
如果我喜欢在网格的不同列中显示teaser元素，它将引导我找到以下标记：
<div class="grid__column-group teaser">
<div class="grid__column">
浏览 1提问于2014-10-23得票数 3
回答已采纳
我即将开始一个react项目，它涉及到一个有点复杂的布局，它需要响应。
我已经用油漆绘制了一个粗略的示意图，说明我需要做什么，并标出了我发现很难完成的地方。
您能告诉我这种布局是否可以在react中使用flexbox或react-css-grid或其他工具来完成吗？如果有一个链接，你可以给我一个教程或一篇文章来解释这一点，那将是非常有帮助的。
这是一张图片
浏览 5提问于2018-10-07得票数 0
我正在开始一个新的angular项目，它已经决定不使用像bootstrap/bulma/materialize/这样的框架……而是编写我们自己的时髦组件库。
我已经做了一些研究，但老实说，我真的不知道从哪里开始(除了css重置)。我仍然是一个大三，已经在以前的现有项目中的一些功能。现在我必须开始新项目的前端工作，并希望构建尽可能结构化和可重用的一切，但我有点迷失了从哪里开始。
当你开始写你的文章时，你的行动计划是什么？你是如何构建你的angular组件库的？你有没有看过关于这方面的很好的教程，我也应该去看看？
浏览 10提问于2018-05-11得票数 1
1回答
我是react-native的新手，我正在尝试创建一个按钮网格，我可以在其中更改每行按钮的数量和按钮的总数。制作网格本身不是问题，但更改每行的项数就更难了。有没有人能给我一些建议，告诉我应该用什么来实现这个目标？我现在正在使用flex-box和ListView。
浏览 9提问于2016-08-24得票数 0
回答已采纳
3回答
我正在为移动和桌面创建一个设计。在移动环境中，所有的元素都是叠加在一起的。在桌面上，元素在2列中。在移动和桌面上，元素有不同的顺序。
我想用CSS网格来创建它。
HTML
<div class="grid-release">
<div class="gi-cover">cover</div>
<div class="gi-detail">detail</div>
<div class="gi-head">head </div
浏览 2提问于2018-02-06得票数 2
回答已采纳
1回答
我正在使用CSS网格来显示一些标签。如果标签很大(即，它的宽度超过150px)，我希望该项目跨入更多的列根据需要。例如，在图像中，我希望红色标记跨越到两列中，以便文本保持在一行中。
有没有可能在不向目标元素添加特定类的情况下做这样的事情？我在React中映射了一个数组来生成每个div，所以不可能只向该元素添加一个类。
index.js
<div className={styles.container}>
<>
浏览 0提问于2021-07-09得票数 0
2回答
我在我制作的样例组合页面中做了css网格布局，当我只使用html / css时，它工作得很好，并且响应性很好:代码在这里：。
没有响应的主机托管在这里：
相同的react组件如下所示：
我做了同样的使用react、sass和node，但是这个没有响应，确切地说，div与类techStack没有调整大小。下面是网格布局css：
.gridContainer {
display: grid;
grid-template-rows: 15px 10% 20% 10% 20% 20% 20% 25px;
grid-template-columns: 10% 80% 10%;
grid-row-
浏览 3提问于2018-03-01得票数 0
回答已采纳
3回答
我在我的柔性盒布局上做了一些浏览器测试，除了Firefox之外，它在所有的常绿浏览器中看起来都很棒。它应该是这样的-所有的网格-单元项目被赋予一个基于项目内容的自动灵活的基础。
然而，在火狐51 (macOS)上，这只是一个巨大的单列。
下面是一个代码库：，并提供了完整的示例。
这是我正在使用的代码
CSS
.Grid {
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap
浏览 11提问于2017-02-01得票数 1
回答已采纳
1回答
我正在创建角2应用程序与角材料和响应，我是使用角挠曲布局库。但是，在使用角挠曲布局时，我逐渐了解到，对于每个页面，我都需要根据需要修改CSS。由于我的应用程序有将近60页，所以用flex语法重新设计所有页面太复杂了。
所以我得问问，
我是否可以使用Flex布局创建全局CSS，这样修改每个页面的工作就会减少吗？
我可以使用另一个比flex布局更容易的响应库吗？
在角2应用程序中，我应该使用什么来响应性以及流体页面结构？
请任何一个人建议我正确的方式来设计网页应用程序的角度2。
浏览 1提问于2018-04-06得票数 0
6回答
每次我开始编写一个新的响应性页面时，我都会提出这个问题，所以我想我是在问你们这个问题：“在为页面添加响应性时破坏可读性是正常的吗？”
我想你最好通过一个例子来理解:我在一个12列的网格系统中有2个大的列，所以我用.grid-6类和css .grid-6 {width:50%}设置了2个div。在tablet布局中，图形设计人员放置了三列，因此我将这些列的宽度更改为33%，但现在我有一个包含grid-6类(建议宽度为50% )的div，实际列宽为33%。
所以当我开始研究响应性时，感觉就像是"hacks"..我想过为平板电脑和手机或其他设备(<div class="
浏览 0提问于2012-12-17得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
