Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What do they mean in flutter by 'cross axis'?

I see in the flutter layout docs the term 'cross axis' all over the place. Does this mean for a vertical layout scheme the horizontal axis is the cross axis, while in a horizontal one it's the vertical axis? Or is it more complicated than that?

like image 586
larryq Avatar asked Oct 08 '18 19:10

larryq


People also ask

What is cross axis in Flutter?

For a column the main axis is vertical and the cross axis is horizontal (90° to the main axis). For a row the main axis is horizontal and the cross axis is vertical (90° to the main axis).

What is cross axis?

The cross axis in flexbox runs perpendicular to the main axis, therefore if your flex-direction is either row or row-reverse then the cross axis runs down the columns. If your main axis is column or column-reverse then the cross axis runs along the rows.

How do you use cross axis alignment in Flutter?

Using mainAxisAlignment in a Row lets you align the row's children horizontally (e.g. left, right). The cross axis to a Row 's main axis is vertical. So using crossAxisAlignment in a Row lets you define, how its children are aligned vertically.

What is main axis and cross axis alignment in Flutter?

Main Axis is vertical and the Cross Axis is horizontal. MainAxisAlignment aligns its children vertically and CrossAxisAlignment aligns horizontally in that Column. Column.


2 Answers

MainAxis is the axis for the Widget in which it is supposed to scroll.

CrossAxis is the one which is perpendicular to MainAxis.


For Row:

mainAxisAlignment = Horizontal Axis
crossAxisAlignment = Vertical Axis

enter image description here


For Column:

mainAxisAlignment = Vertical Axis
crossAxisAlignment = Horizontal Axis

enter image description here

Image source

like image 105
CopsOnRoad Avatar answered Oct 21 '22 00:10

CopsOnRoad


For a column the main axis is vertical and the cross axis is horizontal (90° to the main axis).
For a row the main axis is horizontal and the cross axis is vertical (90° to the main axis).

like image 42
Günter Zöchbauer Avatar answered Oct 21 '22 00:10

Günter Zöchbauer