Row 정렬 예제 (mainAxisAlignment / crossAxisAlignment)

📌 목표

• mainAxisAlignment: spaceEvenly
• crossAxisAlignment: center

👉 이 두 개가 실제로 어떻게 배치되는지 눈으로 확인

---

✅ 간단 예제 코드

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: AlignExample(),
    );
  }
}

class AlignExample extends StatelessWidget {
  const AlignExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Row Alignment Example")),
      body: Container(
        height: 200, // 높이 주는 이유: 세로 정렬 확인
        color: Colors.grey[300],
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly, // 가로 균등 배치
          crossAxisAlignment: CrossAxisAlignment.center,    // 세로 중앙 정렬
          children: [
            Container(width: 50, height: 50, color: Colors.red),
            Container(width: 50, height: 80, color: Colors.green),
            Container(width: 50, height: 30, color: Colors.blue),
          ],
        ),
      ),
    );
  }
}

---

📌 실행 결과 느낌

|   🔴   🟢   🔵   |
(좌우 간격이 모두 동일)

세로 기준:
모든 박스가 가운데 라인에 맞춰짐

---

📌 동작 설명

✅ mainAxisAlignment: spaceEvenly

👉 가로 방향에서
앞 / 사이 / 뒤 간격이 모두 동일

|  🔴   🔵   🟢  |
 ^   ^   ^   ^
 간격이 전부 동일

---

✅ crossAxisAlignment: center

👉 세로 방향에서
모든 위젯을 가운데로 정렬

높이가 달라도 중심선 기준으로 정렬됨

---

📌 비교 (중요)

속성	방향	역할
mainAxisAlignment	가로 (Row 기준)	좌우 배치
crossAxisAlignment	세로	위아래 정렬

---

🚀 한 줄 핵심

👉 Row는 가로(main), 세로(cross) 축을 나눠서 생각하면 끝

---