Question

I'm confused about crossAxisAlignment and mainAxisAlignment. Can anyone please explain it in simple words?

Answer 1

对于行：

mainAxisAlignment =水平轴
crossAxisAlignment =垂直轴

对于列：

mainAxisAlignment =垂直轴
crossAxisAlignment =水平轴

Image source

Answer 2

Row/Column are associated to an axis:

Horizontal for Row
Vertical for Column

mainAxisAlignment is how items are aligned on that axis. crossAxisAlignment is how items are aligned on the other axis.

Answer 3

mainAxisAlignment 属性

当 mainAxisSize 设置为 MainAxisSize.max 时，Row 和 Column 可能会为其子项布置额外的空间。 mainAxisAlignment 属性决定了 Row 和 Column 如何在额外空间中放置它们的子项。 mainAxisAlignment 有六个可能的值：

示例：修改主轴对齐

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        BlueBox(),
        BlueBox(),
        BlueBox(),
      ],
    );
  }
}

class BlueBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 50,
      height: 50,
      decoration: BoxDecoration(
        color: Colors.blue,
        border: Border.all(),
      ),
    );
  }
}

crossAxisAlignment 属性

crossAxisAlignment 属性决定了 Row 和 Column 如何将其子项定位在其横轴上。 A Row 的横轴是垂直的，而 Column 的横轴是水平的。 crossAxisAlignment 属性有五个可能的值：

示例：修改横轴对齐

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        BlueBox(),
        BiggerBlueBox(),
        BlueBox(),
      ],
    );
  }
}

class BlueBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 50,
      height: 50,
      decoration: BoxDecoration(
        color: Colors.blue,
        border: Border.all(),
      ),
    );
  }
}

class BiggerBlueBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 50,
      height: 100,
      decoration: BoxDecoration(
        color: Colors.blue,
        border: Border.all(),
      ),
    );
  }
}