Flutter dart 정렬하기 - MainAxisAlignment CrossAxisAlignment

MainAxisAlignment 축에 따른 정렬

 

 

MainAxisAlignment.start 주축의 시작부분에 정렬 - row는 왼쪽, column는 위쪽 정렬

Row(
  mainAxisAlignment: MainAxisAlignment.start,
  children: <Widget>[
    Text('One'),
    Text('Two'),
    Text('Three'),
  ],
)

 

 

CrossAxisAlignment.start 교차축의 시작부분에 정렬 - row는 위쪽, column은 왼쪽 정렬

Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    Container(color: Colors.red, width: 50, height: 100),
    Container(color: Colors.green, width: 50, height: 50),
    Container(color: Colors.blue, width: 50, height: 75),
  ],
)

 

 

 

MainAxisAlignment.end 주축의 끝부분에 정렬 - row는 오른쪽, column는 아래쪽 정렬

Row(
  mainAxisAlignment: MainAxisAlignment.end,
  children: <Widget>[
    Text('One'),
    Text('Two'),
    Text('Three'),
  ],
)

 

 

CrossAxisAlignment.end 교차축의 끝부분에 정렬 - row는 아래쪽, column는 오른쪽 정렬

Row(
  crossAxisAlignment: CrossAxisAlignment.end,
  children: <Widget>[
    Container(color: Colors.red, width: 50, height: 100),
    Container(color: Colors.green, width: 50, height: 50),
    Container(color: Colors.blue, width: 50, height: 75),
  ],
)

 

 

MainAxisAlignment.center  주축의 중앙부분에 정렬 - row는 수평, column는 수직 중앙 정렬

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Text('One'),
    Text('Two'),
    Text('Three'),
  ],
)

 

 

 

CrossAxisAlignment.center  교차축의 중앙부분에 정렬 - row는 수직 , column는 수평 중앙 정렬

Row(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[
    Container(color: Colors.red, width: 50, height: 100),
    Container(color: Colors.green, width: 50, height: 50),
    Container(color: Colors.blue, width: 50, height: 75),
  ],
)

 

 

 

MainAxisAlignment.spaceBetween 자식들 사이 공간을 균등히 배분

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: <Widget>[
    Text('One'),
    Text('Two'),
    Text('Three'),
  ],
)

 

 

MainAxisAlignment.spaceAround 자식들 사이와 양쪽끝 공간을 균등히 배분, 양쪽끝 공간은 자식 사이 공간과 다를수 있다.

Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: <Widget>[
    Text('One'),
    Text('Two'),
    Text('Three'),
  ],
)

 

 

MainAxisAlignment.spaceEvenly 자식들 사이와 양쪽끝 공간을 균등히 배분, 양쪽끝 공간은 자식 사이 공간과 같다.

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: <Widget>[
    Text('One'),
    Text('Two'),
    Text('Three'),
  ],
)

 

 

CrossAxisAlignment.stretch 자식들을 교차축 방향으로 가능한 늘려 정렬 - row는 수직방향으로, column에서는 수평방향으로 늘어남.

Row(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: <Widget>[
    Container(color: Colors.red, width: 50, height: 100),
    Container(color: Colors.green, width: 50, height: 50),
    Container(color: Colors.blue, width: 50, height: 75),
  ],
)