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
Post a Comment