react native-tutorial

React Native Flexbox

Flexbox, also known as Flexible Box Module, is a design approach that addresses a one-dimensional application layout. What does the one-dimensional layout actually mean now? It simply states that the flexbox layout principle depends on displaying one dimension at a time, such as a row or column.

Flexbox also offers flexible space distribution between interface elements and strong alignment capabilities. Flexbox layout has simplified the life of developers by reducing issues with application responsiveness.

Two Axes of Flexbox

Flexbox deals with two axes –

  • Main Axis: It is defined by property flex-direction
  • Cross Axis: It runs perpendicular to the main axis

Start and End Lines

It is parallel to the main axis and is called the cross axis.

In the past, CSS prioritised and defaulted to the left-to-write authoring mode. However, a variety of writing styles were introduced with the use of current layout techniques. As a result, it disproved the notion that text lines should begin at the top left and end on the right.

Flex Containers

A flex container is the portion of the document that we wish to apply the flex feature to. Simply change the display property (of the area’s container) to flex or inline-flex to create a flex container. Items contained in the area’s container will also change into flex items.

Example:

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

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to Learn Code Zone</Text>
        <Text style={styles.welcome}>Welcome to Learn Code Zone</Text>
        <Text style={styles.welcome}>Welcome to Learn Code Zone</Text>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 20,
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    flex: 1,
    margin: 20,
    backgroundColor: 'orange',
    margin: 10,
    textAlign: 'center',
    fontSize: 20,
    paddingTop: 70,
  }
});

Output:

RECOMMENDED ARTICLES





Leave a Reply

Your email address will not be published.