react native flex direction

Question

Generally in the excel sheet..we have rows like below

Row1
Row2
Row3

and columns like

column1  | column2 | column3

But why in react native when using flexDirection: 'column' the box's/text are defined as

flexcolumn1
flexcolumn2
flexcolumn3

and when using flexDirection: 'row' the box's/text are defined as

flexrow1  | flexrow2 | flexrow3

i find this weird and getting confused... is this just standard difference in react native or there is different concept behind this ?

Why are you even comparing excel to React-native :D Anyways, flexDirection points to how the components inside are packed. In a Row or In a Column. — Minkesh Jain, May 31 '17 at 12:32

score 3 · Answer 1 · answered Feb 28 '20 at 23:04

I think you're correct to point out that rows are stacked on top of one another:

Row 1
Row 2
Row 3

And that columns are set side by side:

Column 1 | Column 2 | Column 3

The thing to understand here is what flexDirection means. We set it on a container. If we set it to row, we're not saying that each child of the container is it's own row. If we were you'd be right to say that things should be laid out like this:

Row 1
Row 2
Row 3

We're saying that the container itself is going to be a row, and children within the container are going to be elements in the row:

Row 1 Item 1 | Row 1 Item 2 | Row 1 Item 3

Here's how the docs word it:

flexDirection controls the direction in which the children of a node are laid out. This is also referred to as the main axis.

It doesn't say that it sets whether the children of a node are rows/columns themselves, it's saying what direction that they will flow. Maybe horizontal and vertical would have been better names.

score 1 · Answer 2 · answered Apr 12 '17 at 09:10

1

I think it is meant like this:

column1_cell1
column1_cell2
column1_cell3

row1_cell1, row1_cell2, row1_cell3

In the first example all the "flex cells" are in one column, in the other they are all in one row.

answered Apr 12 '17 at 09:10

Viktor Sec

2,756
1
24
31

score 1 · Answer 3 · answered Jun 07 '17 at 09:08

From the docs:

Flexbox works the same way in React Native as it does in CSS on the web, with a few exceptions. The defaults are different, with flexDirection defaulting to column instead of row, and the flex parameter only supporting a single number.

score 0 · Answer 4 · answered Apr 12 '17 at 09:06

It is more to do with Flexbox layout specification. https://www.w3.org/TR/css-flexbox-1/#flex-direction-property

Think of it as a container and how the items are placed/flows inside the container. If the direction is row, the items inside it flow in the horizontal direction. If the direction is column, the items inside it flow in the vertical direction.

score 0 · Answer 5 · answered May 08 '17 at 18:27

Just a little trick. Inside a column, elements are displayed from top to bottom(or from bottom to top), and that's the default alignment of a flex box. flexDirection: 'row': means you are displaying element form left to right (or right to left whether you are using row-reverse or not)

react native flex direction

5 Answers5