Getting started with React Native Flexbox Layout

By StartxLabs
Date 16-03-21
Getting started with React Native Flexbox Layout
" Getting started with React Native Flexbox Layout"

 

The flexbox layout enables us to format React native applications in an efficient way. It is a utility to manage and arrange the position of items vertically and horizontally by rows and columns. Items placed inside a container will flex or adjust themselves to different sizes that make them fit the available space. React native flexbox can be used to manage the layout of your application or website and also makes the responsive design much easier.

 

React native flexbox has certain properties which we should be aware of before we start to use it. Before getting into the properties, we will discuss some of the properties associated with these properties.

 

 

  • main-axis: It is the primary axis based on the flex-direction property, along which the items of the flex container are laid out.

  • main-start and main-end: The flex items inside the container start on the main-start and end at the main-end side.

  • main-size: The term main-size denotes the width or height of the items or the flex container which is located on the main dimension.

  • cross-axis: Cross axis is the axis perpendicular to the main axis which depends on the main axis's direction.

  • cross-start and cross-end: Items placed inside a container are filled inside flex lines that start on cross-start and end at the cross-end side.

  • cross size: The cross size of an item is its width or height that is present in the cross dimension.

 

React Native Flexbox Properties 

 

  • Display flex

display: flex property uses the flexbox within the container and it is chosen by a div element by default. The element associated with the display: flex setting occupies the full width of the line in which it is present. If you want to use flexbox on a particular section of your page, the parent container should be converted into a flex container by inserting the display: flex command to the parent. This will let the container initialize itself as the flex container and use some of the flex properties by default.

 

 

 

  • Flex Direction

If you want to manage how the items should be displayed inside a container, then you can use flex-direction. Using flex-direction, you can display the items from left to right, right to left, bottom to top, and top to bottom. By default, the items are arranged from left to right along the main axis. Using flex-direction, you can also implement row-reverse and column-reverse.

 

 

 

 

 

  • Justify Content

If you want to arrange the flex items in the container along the main axis, then justify-content should be used. This property works based on the displaying content. It enables us to fill up the empty rows and can modify how they look.

 

flex-start, flex-end, center, space-between, space-around are the most commonly used justify-content properties.

 

 

  • Flex Align

Arranging flex items along the cross axis is done by using the align-items property. Using justify-content along with the align-items, the items can be arranged in various ways.

 

flex-start, flex-end, center, baseline, and stretch are the most commonly used flex align properties. To use stretch, the height must be set to auto to work according to your expectation.

 

 

 

 

  • Align Self

To manage the alignment of a single element, the align-self property can be used. It is similar to the align-items and has all its properties like flex-start, flex-end, center, space-between, and space-around.

 

  • Flex Wrap

By default, all the elements inside a container of a flexbox will be arranged into one row. If you want to change this, you can use the flex-wrap property. The 3 values that can be assigned to flex-wrap are nowrap, wrap, and wrap-reverse.

 

flex-wrap: nowrap causes every item to be fixed from left to right in one row.

flex-wrap: wrap causes items to be popped to the next row whenever the first row gets filled.

flex-wrap: wrap-reverse causes the items to be popped to the next row and displays them right to left.

 

  • Flex Flow

This property combines two other properties such as the flex-wrap and flex-direction into one property. The values assigned to this property combine the values of the above-mentioned properties. For example, flex-flow: column wrap

 

  • Align Content

It is used to align items with multiple lines and on the cross axis. flex-start, flex-end, center, space-between, space-around, and stretch are the properties used for aligning content on multiple lines.

 

In this article, we have discussed briefly React Native flexbox and the different properties that can be used with the React Native flexbox.

subscribe to startxlabs

startxlabs