DEV Community

Sujith V S
Sujith V S

Posted on • Edited on

2 1 1 1 1

React Native flex-box concepts

  • By default every view in react native uses flexbox.

  • BY default every view organizes its children in a column.

  • if we add height and width in the parent view, the child element will align themself along the cross axis by stretching.
    eg: if the main axis is row, then all the child element will take the height of the parent and the width has no impact.
    So inorder to give width to the child elements, we can use flex property.flex property works along main axis.

  • The default value of alignItems is 'stretch'.

  • flexDirection - values: row, column, row-reverse, column-reverse.

  • justifyContent(to organize elements along main axis.) - values: center, flex-end, flex-start, space-between, space-around

  • alignItems(to organize elements along cross axis.)

  • For child elements.
    flex - flex will define how your items are going to “fill” over the available space along your main axis. Space will be divided according to each element's flex property.

Read more about react native flebox

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay