flexbox 相关问题

我已经读过几个Flexbox教程，但是我仍然无法完成这项简单的任务。如何将红色框提升到100％的宽度？代码：我已经阅读了几个Flexbox教程，但是我仍然无法使这项简单的任务工作。我怎么可以将红色框提交100％的宽度？代码： <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Natives </Text> <Text style={styles.line1}> line1 </Text> <Text style={styles.instructions}> Press Cmd+R to reload,{'\n'} Cmd+D or shake for dev menu </Text> </View> 风格： container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', borderWidth: 1, flexDirection: 'column', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, borderWidth: 1, }, line1: { backgroundColor: '#FDD7E4', }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, borderWidth: 1, }, 谢谢你！ update1： Nishanth Shankar的建议，添加 flex:1对于包装纸， flexDirection: 'row' 输出：代码： <View style={styles.container}> <View style={{flex:1}}> <Text style={styles.welcome}> Welcome to React Natives </Text> </View> <View style={{flex:1}}> <Text style={styles.line1}> line1 </Text> </View> <View style={{flex:1}}> <Text style={styles.instructions}> Press Cmd+R to reload,{'\n'} Cmd+D or shake for dev menu </Text> </View> </View> container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', borderWidth: 1, flexDirection: 'row', flexWrap: 'wrap', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, borderWidth: 1, }, line1: { backgroundColor: '#FDD7E4', }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, borderWidth: 1, }, simply将alignSelf: "stretch"添加到您的物品的样式表中。 line1: { backgroundColor: '#FDD7E4', alignSelf: 'stretch', textAlign: 'center', }, 您应该使用dimensions 首先定义尺寸 import { Dimensions } from "react-native"; var width = Dimensions.get('window').width; //full width var height = Dimensions.get('window').height; //full height ，然后更改样式如下： line1 为了仅弯曲中心文本，可以采用其他方法 - unflex其他视图。 LETFlexDirection保留在“列” 从容器中删除line1: { backgroundColor: '#FDD7E4', width: width, }, addalignItems : 'center'到您不想弹性的文本视图您可以将文本组件包裹在视图组件中，并给视图一个flex为1。 flex将给出： 100％宽度如果sytles.container 100％如果styles.container中的alignSelf:'center' 您去的地方：根据下面的“更改LINE1”样式： flexDirection:'row' 第一个添加尺寸组件： flexDirection:'column' 秒定义变量： line1: { backgroundColor: '#FDD7E4', width:'100%', alignSelf:'center' } 三分之二放在您的样式表中： import { AppRegistry, Text, View,Dimensions } from 'react-native'; 实际上，在此示例中，我想进行响应式视图，并且只想查看屏幕视图的0.25，因此我将其乘以0.25，如果您想要100％的屏幕不会与任何类似的内容相乘： var height = Dimensions.get('window').height; var width = Dimensions.get('window').width; 使用JavaScript获得宽度和高度，并将其添加到视图的样式中。要获得全宽度和高度，请使用textOutputView: { flexDirection:'row', paddingTop:20, borderWidth:1, borderColor:'red', height:height*0.25, backgroundColor:'darkgrey', justifyContent:'flex-end' } https：//facebook.github.io/react-native/docs/dimensions.html textOutputView: { flexDirection:'row', paddingTop:20, borderWidth:1, borderColor:'red', height:height, backgroundColor:'darkgrey', justifyContent:'flex-end' } 然后， Dimensions.get('window').width getSize() { return { width: Dimensions.get('window').width, height: Dimensions.get('window').height } } 和<View style={[styles.overlay, this.getSize()]}> 对我不起作用。 width: '100%'不适合我的任务，因为我需要在深度嵌套的视图上操作。如果我重写您的代码，这就是对我有用的。我刚刚添加了更多alignSelf: 'stretch'，并使用了Dimensions属性来实现所需的布局： View 即将删除容器样式中的flex，然后将 {/* a column */} <View style={styles.container}> {/* some rows here */} <Text style={styles.welcome}> Welcome to React Natives </Text> {/* this row should take all available width */} <View style={{ flexDirection: 'row' }}> {/* flex 1 makes the view take all available width */} <View style={{ flex: 1 }}> <Text style={styles.line1}> line1 </Text> </View> {/* I also had a button here, to the right of the text */} </View> {/* the rest of the rows */} <Text style={styles.instructions}> Press Cmd+R to reload,{'\n'} Cmd+D or shake for dev menu </Text> </View> 添加到以下the的样式中。它会很好地工作 alignItems: 'center' textAlign: "center" trone this： line1 注：尝试完全了解Flex概念。 container: { flex: 1, justifyContent: 'center', backgroundColor: '#F5FCFF', borderWidth: 1, } line1: { backgroundColor: '#FDD7E4', textAlign:'center' }, themply使用宽度：'100％'Style ={{width : "100%"}} 我的一个人没有100％的宽度工作。我添加了儿童组件。它立即起作用。您可以尝试一下，也可能对您的情况有效。 simple答案：使用对齐：在容器视图上“伸展”。为我工作

flexbox react-native

回答 9 投票 0

为什么位置是：粘性不适用于面板，而是适用于表标头和行？我正在尝试使用::在挠性容器内的粘性元素上添加阴影效果，但它无法正常工作。相反，它覆盖了主表。当我使用位置时：相对; ...

当我使用位置时：相对；和位置：绝对；阴影出现，但仅在水平滚动后才出现。我需要它的表现就像我的表标头和行中的粘性元素一样，它们在滚动时仍然可见。

javascript css reactjs flexbox

回答 1 投票 0

反应 / CSS布局：使侧边栏可滚动

css flexbox scroll

回答 1 投票 0

html css flexbox

回答 1 投票 0

如何缩放图像以适合网格盒内的弹性箱我想创建一个“仪表板”页面，该页面使用浏览器窗口中的所有可用空间。浏览器窗口将分为两个相等的侧面。右侧空间将遏制...