mainAxisSize、mainAxisAlignment、crossAxisAlignment

Flutter中，Row Widget 和Column Widget 都继承自Flex Widget
借用一张图解释一下什么是Flex的主轴与交叉轴


image.png

mainAxisSize

主轴应占用多少空间
MainAxisSize.max

MainAxisSize.max.png

MainAxisSize.min

MainAxisSize.min.png

mainAxisAlignment

如何在Flex布局中沿主轴放置子节点
需要设置mainAxisSize.max才有效果
MainAxisAlignment.center

MainAxisAlignment.center.png

MainAxisAlignment.spaceEvenly
MainAxisAlignment.spaceEvenly.png

MainAxisAlignment.spaceBetween
MainAxisAlignment.spaceBetween.png

crossAxisAlignment

如何在Flex布局中沿交叉轴轴放置子节点
CrossAxisAlignment.center

CrossAxisAlignment.center.png

CrossAxisAlignment.end
CrossAxisAlignment.end.png

CrossAxisAlignment.stretch
CrossAxisAlignment.stretch.png

CrossAxisAlignment.baseline
CrossAxisAlignment.baseline.png

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容