Flex,justifycontent and Alignitems in the reactnative

Source: Internet
Author: User

The flex layout in reactnative and the CSS are pretty much about justifycontent and Alignitems's understanding. Both of these properties are related to the Flexdirection row and column, and leaving these two properties means nothing. Coordinates in iOS have the X and Y axes to position the control's location, and these two properties can correspond the row to the horizontal x-axis, and the column is the y-axis.
Flexdirection is deciding which of the X and Y is the main axis, then the child controls are arranged in which direction.
Justifycontent is always based on the spindle as standard, alignitems the sub-elements in the secondary axis.
For example, row is the spindle, the effect is the x-axis right-aligned, the y-axis is centered.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow */
import React, {Component} from ' React ';
Import {Text,image,view,appregistry,stylesheet} from ' react-native ';



Export default class Lostofstyle extends Component {
  render () {
    return (
        <view style={{
          flex:1,
          flexdirection: ' Row ',
          justifycontent: ' Flex-start ',
          alignitems: ' Center ',
        }}>
          < Text style={{width:100,backgroundcolor: ' Powderblue '}}>this is a blue</text>

        </View>
      );
  }
}

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.