Row - 가로 정렬

1. Row

• 가장 많이 사용하는 위젯 중 하나

• 위젯들을 가로로 배치시키고 싶을 때 사용

• Column 위젯과 형태가 흡사하지만 기준 축이 가로라는 것이 다름

2. MainAxisAlignment

Row(
  mainAxisAlignment: MainAxisAlignment.start,
  children: [
    Container(
      width: 100,
      height: 100,
      color: Colors.red,
    ),
    Container(
      width: 100,
      height: 100,
      color: Colors.blue,
    ),
    Container(
      width: 100,
      height: 100,
      color: Colors.green,
    ),
  ],
);

3. CrossAxisAlignment세로축을 의미

• 부모 위젯 내에서 세로축으로 위젯을 어떻게 배치할지를 결정

• stretch는 가능한 최대 영역까지 확장

• CrossAxisAlignment.baseline : textBaseline 특성 추가

Container(
  height: 300,
  color: Colors.grey.shade300,
  child: Row(
    crossAxisAlignment: CrossAxisAlignment.baseline,
    textBaseline: TextBaseline.alphabetic,
    children: const [
      Text(
        "English",
        style: TextStyle(fontSize: 30),
      ),
      Text(
        " 123 ",
        style: TextStyle(fontSize: 20),
      ),
      Text(
        "한글",
        style: TextStyle(fontSize: 15),
      ),
    ],
  ),
);

4. mainAxisSize : 가로축의 사이즈

• min : Row의 자식 위젯들의 사이즈만큼 Row위젯을 최소화

• max : Row의 부모 위젯 내에서 커질 수 있는 한 Row 위젯을 최대화