Flex 弹性布局

Row和Column的父类，Flutter中最强大的布局方式。可容纳多个组件，可与Spacer、Expanded、Flexible组件联用进行灵活布局

相关组件

Row Column Expanded Spacer Flexible

Flex的排布方向

   <br />【children】 : 组件列表   【List<Widget>】<br />【direction】 : 方向   【Axis】<br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/326147/1589508969017-c7b3e09f-d1ca-47f8-ab70-541de111e4c6.png#align=left&display=inline&height=130&margin=%5Bobject%20Object%5D&name=image.png&originHeight=130&originWidth=366&size=4577&status=done&style=none&width=366)

import 'package:flutter/material.dart';
class DirectionFlex extends StatelessWidget {

  final  redBox= Container(
    color: Colors.red,
    height: 30,
    width: 40,
  );

  final blueBox= Container(
    color: Colors.blue,
    height: 20,
    width: 30,
  );

  final greenBox= Container(
    color: Colors.green,
    height: 20,
    width: 20,
  );

  @override
  Widget build(BuildContext context) {
    return Wrap(
        children: Axis.values
            .map((mode) => Column(children: <Widget>[
          Container(
              margin: EdgeInsets.all(5),
              width: 160,
              height: 80,
              color: Colors.grey.withAlpha(33),
              child: _buildItem(mode)),
          Text(mode.toString().split('.')[1])
        ]))
            .toList());
  }

  _buildItem(mode) => Flex(
    direction: mode,
    children: <Widget>[
      blueBox, redBox, greenBox
    ],
  );
}

Flex主轴对齐方式

   <br />【mainAxisAlignment】 : 主轴对齐   【MainAxisAlignment】<br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/326147/1589508980511-9f7be667-8364-4df9-8479-65bf30560abe.png#align=left&display=inline&height=358&margin=%5Bobject%20Object%5D&name=image.png&originHeight=358&originWidth=360&size=13052&status=done&style=none&width=360)

import 'package:flutter/material.dart';
class MainAxisAlignmentFlex extends StatelessWidget {

  final  redBox= Container(
    color: Colors.red,
    height: 30,
    width: 40,
  );

  final blueBox= Container(
    color: Colors.blue,
    height: 20,
    width: 30,
  );

  final greenBox= Container(
    color: Colors.green,
    height: 20,
    width: 20,
  );

  @override
  Widget build(BuildContext context) {
    return Wrap(
        runSpacing: 5,
        children: MainAxisAlignment.values
            .map((mode) => Column(children: <Widget>[
          Container(
              margin: EdgeInsets.all(5),
              width: 160,
              height: 80,
              color: Colors.grey.withAlpha(33),
              child: _buildItem(mode)),
          Text(mode.toString().split('.')[1])
        ]))
            .toList());
  }

  _buildItem(mode) => Flex(
    direction: Axis.horizontal,
    mainAxisAlignment: mode,
    children: <Widget>[
      blueBox, redBox, greenBox
    ],
  );
}

Flex交叉轴对齐方式

   <br />【crossAxisAlignment】 : 交叉轴对齐   【CrossAxisAlignment】<br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/326147/1589508991009-7b0db123-7c46-453e-bf20-c99c6280bcfe.png#align=left&display=inline&height=344&margin=%5Bobject%20Object%5D&name=image.png&originHeight=344&originWidth=358&size=9965&status=done&style=none&width=358)

import 'package:flutter/material.dart';
class CrossAxisAlignmentFlex extends StatelessWidget {

  final  redBox= Container(
    color: Colors.red,
    height: 30,
    width: 40,
  );

  final blueBox= Container(
    color: Colors.blue,
    height: 20,
    width: 30,
  );

  final greenBox= Container(
    color: Colors.green,
    height: 20,
    width: 20,
  );

  @override
  Widget build(BuildContext context) {
    return Wrap(
        runSpacing: 5,
        children: CrossAxisAlignment.values
            .map((mode) => Column(children: <Widget>[
          Container(
              margin: EdgeInsets.all(5),
              width: 160,
              height: 80,
              color: Colors.grey.withAlpha(33),
              child: _buildItem(mode)),
          Text(mode.toString().split('.')[1])
        ]))
            .toList());
  }

  _buildItem(mode) => Flex(
    direction: Axis.horizontal,
    crossAxisAlignment: mode,
    textBaseline: TextBaseline.alphabetic,
    children: <Widget>[
      blueBox, redBox, greenBox
    ],
  );
}

Flex垂直方向顺序

   <br />【verticalDirection】 : 垂直方向顺序   【VerticalDirection】<br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/326147/1589509004247-72ced8ce-40d2-4e86-8de3-93ad537bb318.png#align=left&display=inline&height=113&margin=%5Bobject%20Object%5D&name=image.png&originHeight=113&originWidth=344&size=3552&status=done&style=none&width=344)

import 'package:flutter/material.dart';
class VerticalDirectionFlex extends StatelessWidget {

  final  redBox= Container(
    color: Colors.red,
    height: 30,
    width: 40,
  );

  final blueBox= Container(
    color: Colors.blue,
    height: 20,
    width: 30,
  );

  final greenBox= Container(
    color: Colors.green,
    height: 20,
    width: 20,
  );

  @override
  Widget build(BuildContext context) {
    return Wrap(
        runSpacing: 5,
        children: VerticalDirection.values
            .map((mode) => Column(children: <Widget>[
          Container(
              margin: EdgeInsets.all(5),
              width: 160,
              height: 80,
              color: Colors.grey.withAlpha(33),
              child: _buildItem(mode)),
          Text(mode.toString().split('.')[1])
        ]))
            .toList());
  }

  _buildItem(mode) => Flex(
    direction: Axis.vertical,
    verticalDirection: mode,
    children: <Widget>[
      blueBox, redBox, greenBox
    ],
  );
}

Flex水平方向顺序

   <br />【textDirection】 : 水平方向顺序   【TextDirection】<br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/326147/1589509014987-fce7999c-8382-47a9-af63-6b33d12c0423.png#align=left&display=inline&height=124&margin=%5Bobject%20Object%5D&name=image.png&originHeight=124&originWidth=366&size=3037&status=done&style=none&width=366)

import 'package:flutter/material.dart';
class TextDirectionFlex extends StatelessWidget {

  final  redBox= Container(
    color: Colors.red,
    height: 30,
    width: 40,
  );

  final blueBox= Container(
    color: Colors.blue,
    height: 20,
    width: 30,
  );

  final greenBox= Container(
    color: Colors.green,
    height: 20,
    width: 20,
  );

  @override
  Widget build(BuildContext context) {
    return Wrap(
        runSpacing: 5,
        children: TextDirection.values
            .map((mode) => Column(children: <Widget>[
          Container(
              margin: EdgeInsets.all(5),
              width: 160,
              height: 80,
              color: Colors.grey.withAlpha(33),
              child: _buildItem(mode)),
          Text(mode.toString().split('.')[1])
        ]))
            .toList());
  }

  _buildItem(mode) => Flex(
    direction: Axis.horizontal,
    textDirection: mode,
    children: <Widget>[
      blueBox, redBox, greenBox
    ],
  );
}