Flutter crossAxisAlignment property

crossAxisAlignment property

The crossAxisAlignment property determines how Row and Column can position their children on their cross axes. A Row’s cross axis is vertical, and a Column’s cross axis is horizontal. The crossAxisAlignment property has five possible values:

 

 

---

CrossAxisAlignment.start

Positions children near the start of the cross axis. (Top for Row, Left for Column)

- Row의 경우 위, Column의 경우 왼쪽

 

 

 

Row /*or Column*/( 
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[
    Icon(Icons.star, size: 50),
   Icon(Icons.star, size: 150),
    Icon(Icons.star, size: 50),
  ],
),

 

---

CrossAxisAlignment.end

Positions children near the end of the cross axis. (Bottom for Row, Right for Column)

- Row의 경우 아래, Column의 경우 오른쪽

 

 

 

---

CrossAxisAlignment.center

Positions children at the middle of the cross axis. (Middle for Row, Center for Column)

-  cross axis 가운데에 배치

 

 

 

---

CrossAxisAlignment.stretch

Stretches children across the cross axis. (Top-to-bottom for Row, left-to-right for Column)

 

---

CrossAxisAlignment.baseline

Aligns children by their character baselines. (Text class only, and requires that the textBaseline property is set to TextBaseline.alphabetic. See the Text widget section for an example.)

 

 

Row(
  crossAxisAlignment: CrossAxisAlignment.baseline,
  textBaseline: TextBaseline.alphabetic,
  children: <Widget>[
    Text(
      'Baseline',
      style: Theme.of(context).textTheme.display3,
    ),
    Text(
      'Baseline',
      style: Theme.of(context).textTheme.body1,
    ),
  ],
),