mainAxisAlignment and crossAxisAlignment

Introduction

MainAxisAlignment and CrossAxisAlignment is the property of a row and column widget. It is used for arranging children widgets. 

Using MainAxisAlignment and CrossAxisAlignment you can arrange the children widget in either vertical or horizontal format. This property is used in the flutter framework while developing an app. Flutter is Google’s UI toolkit used for building cross-platform applications from a single codebase. The mainaxis and cross axis alignment uses constants that determine that how children should be placed along the axis. Constants like center, end, spaceAround, space between, spaceEvently, start values, etc.

 Row(
     mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
       Text("Tip",
         style: TextStyle(color: Colors.grey.shade700),
         ),],
       ),

Understanding mainAxis and crossAxisAlignment

For Row

While aligning row in mainAxis the widget will place in a horizontal manner. And aligning row in corssAxisAlignment the widget will place in a vertical manner.

• mainAxisAlignment = Horizontal axis
• crossAxisAlignment = Vertical axis

For Column

While aligning the column in mainAxis the widget will place in a vertical manner. And aligning column in corssAxis the widget will place in a horizontal manner.

• mainAxisAlignment = Vertical axis
• crossAxisAlignment = Horizontal axis