정의하는 위젯에 따라 상대적인 정렬지정 방법이다.

구분 Column Row
Main Axis 세로 가로
mainAxisAlignment 위아래로 정렬 좌우로 정렬
crossAxisAlignment
좌우로 정렬 위아래로 정렬

 

예시1. Column에서 세로 중앙, 자식들은 왼쪽 정렬

Column(
  mainAxisAlignment: MainAxisAlignment.center,    // 세로로 가운데
  crossAxisAlignment: CrossAxisAlignment.start,   // 가로로 왼쪽(시작) 정렬
  children: [
    Text('A'),
    Text('B'),
  ],
)

 

예시2. Row에서 가로로 아이템들을 균등 분배, 세로 가운데

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween, // 좌우 끝에 배치
  crossAxisAlignment: CrossAxisAlignment.center,     // 세로 중앙 정렬
  children: [ ... ],
)