Use flexbox to create layouts in React 360

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.