Browse Source

0.0.9 Flex justifyContent (primary axis).

Frederic G. MARAND 6 years ago
parent
commit
cf27335a84
1 changed files with 8 additions and 1 deletions
  1. 8 1
      App08FlexLayout.js

+ 8 - 1
App08FlexLayout.js

@@ -5,7 +5,14 @@ class FlexDirectionBasics extends React.Component {
   render() {
     return (
       // Try with height: 300 instead of flex: 1
-      <View style={{ flex: 1, flexDirection: 'column' }}>
+      <View style={{
+        flex: 1,
+        // row or column
+        flexDirection: 'column',
+        // flex-start, center, flex-end, space-around, space-between
+        // space-evenly is also described, but throws invalid value error.
+        justifyContent: 'space-around',
+      }}>
         <View style={{ height: 50, width: 50, backgroundColor: 'powderblue' }} />
         <View style={{ height: 50, width: 50, backgroundColor: 'skyblue' }} />
         <View style={{ height: 50, width: 50, backgroundColor: 'steelblue' }} />