react native flex direction

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 ?

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.

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.

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)

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.

Comments

Popular posts from this blog

Meaning of `{}` for return expression

Get current scroll position of ScrollView in React Native

flutter websocket connection issue