From the course: Learning React Native

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Flexbox layouts

Flexbox layouts

From the course: Learning React Native

Start my 1-month free trial

Flexbox layouts

- [Instructor] Layout and React Native is based upon Flexbox, a popular layout module for CSS. Flexbox gives us the ability to compose styles that can position elements anywhere on a screen. In Flexbox, there are flex containers and flex elements. In this case, the view will be our flex container, and it contains three flex elements, each one of these text elements. Flex containers either display their child elements in a row or in a column. Now by default, the containers display these elements in a column, but if I want to change that, I can just add a flex direction attribute and set that to row. Now the text elements are lined up in a row. You can also add a justify content attribute to flex containers that tell the container how to space and position the child elements. Those elements can be positioned to the center or flex start which is the left which is the default, or flex end which is the right which is the end.…

Contents