Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Use flexbox to create layouts in React 360

    Tomasz ŁakomyTomasz Łakomy
    reactReact
    ^16.3.2

    In this lesson we are going to learn how to use flexbox in React 360 in order to create a list of countries that the user would like to visit

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: 0:00 We have two text components which are displayed over here. They have a width specified to 30 percent. Even though they could fit in a single line, they have displayed one under another.

    0:10 The reason that it happens is that, by default, React 360 uses Flexbox and the default flex direction is set to column. If I were to change the flex direction of this major component to row, and after I save and refresh that, we're going to see those two text components in a single line.

    0:26 Next, we're going to build a list of countries that we would like to visit. I'm going to copy and paste some text components. We're going to change the greeting to menu item, as well as we're going to remove the flex direction set to row. After I save and refresh that, we're going to see all those countries displayed over here.

    0:42 Next, let's remove this hard coded hide. We're going to center all those countries in the middle of this component. We're going to use Flexbox. I'm going to set the align items to center, as well as justify content to center, as well.

    0:57 After I save and refresh that, we're going to see the result over here. We have the list of all the countries centered both horizontally and vertically inside of this view component.