Flutter - the most detailed Row (horizontal) layout tutorial

Introduction to Row
Arranges the internal layout horizontally and can accommodate multiple components.

Attributes	effect
mainAxisAlignment	Spindle Alignment
crossAxisAlignment	horizontal axis alignment
textBaseline	text baseline
textDirection	Vertically
mainAxisSize	Spindle size
children	child layout units: (array)

• Create a horizontal layout

import 'package:flutter/material.dart';
class RowWidget extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return Container(
      height: 100,
      color: Colors.yellow,
      child: Row(
       mainAxisAlignment: MainAxisAlignment.start, ///主轴
        crossAxisAlignment: CrossAxisAlignment.end,///横轴
        children: [
          Container(
            width: 100,
            color: Colors.red,
            child: Text('left'),
          ),
          Container(
            width: 100,
            color: Colors.green,
            child: Text('center'),
          ),
          Container(
            width: 100,
            color: Colors.blueAccent,
            child: Text('right'),
          ),
        ],
      ),
    );
  }
}

Attribute: mainAxisAlignment: MainAxisAlignment.start

Attribute: mainAxisAlignment: MainAxisAlignment.center

Attribute: mainAxisAlignment: MainAxisAlignment.end

Attribute: mainAxisAlignment: MainAxisAlignment.spaceBetween

Attribute: mainAxisAlignment: MainAxisAlignment.spaceAround

Attribute: mainAxisAlignment: MainAxisAlignment.spaceEvenly

Attribute: crossAxisAlignment: CrossAxisAlignment.end

Attribute: crossAxis Alignment: CrossAxisAlignment.start

property: crossAxisAlignment: CrossAxisAlignment.center

Attribute: crossAxisAlignment: CrossAxisAlignment.stretch