Scribd
Upload
22 views

Layout Flexbox

Uploaded by

Killua Zoldyck
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
22 views

Layout Flexbox

Uploaded by

Killua Zoldyck
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 1

import React, { Component } from 'react';

import { StyleSheet, View } from 'react-native';


export default class HeightWidth extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.powderblue} />
<View style={styles.skyblue} />
<View style={styles.steelblue} />
</View>
);
}
}
const styles = StyleSheet.create({
container:{
flex:1 },
powderblue:{
flex:1,
backgroundColor: 'powderblue',
},
skyblue:{
flex:2,
backgroundColor: 'skyblue', },
steelblue:{
flex:3,
backgroundColor: 'steelblue',
},
})
const styles = StyleSheet.create({
container:{
flex: 1,
flexDirection: 'column', // set elements horizontally`.
justifyContent: 'center',
alignItems: 'stretch',
},
powderblue:{
width: 60,
height: 60,
backgroundColor: 'powderblue'
},
skyblue:{
width: 60,
height: 60,
backgroundColor: 'skyblue',
},
steelblue:{
/*width: 60,*/
height: 60,
backgroundColor: 'steelblue',
}
})

You might also like