Container는 페이지에서 최대한의 공간을 차지하려 합니다.

두 가지로 정리할 수 있는데, Container 내부에
1. child가 없을때와
2. child가 있을때 입니다.

1. Container withuout child

1-1. Container() 기본

Container(
    color: Colors.red
)

• 가능한 최대한 공간을 차지하려 하기 때문에, 전체에 적용됩니다.

1-2. Container()에 width, height를 주었을 때.

  Container(
      color: Colors.red
      width: 100,
      height: 100
  )

• width, height같은 제약조건을 주게되면 그렇게 맞춰집니다.

1-3. Container()의 margin, padding 그리고 EdgeInsets

1-3-1. margin과 EdgeInsets.all()

    Container(
        width: 100,
        height: 100,
        margin: EdgeInsets.all(20)
    )

1-3-2. margin과 EdgeInsets.symmetric()

Container(
    width: 100,
    height: 100,
    margin: EdgeInsets.symmetric(
    	vertical: 80,
      horizontal: 20
    )
)

2. Container with child

Container(
	color: Colors.red,
    child: Text('Hello')
)

• child가 있을경우에, width, height, margin, padding등 제약조건이 없다면, 그 child만큼만 차지하게 됩니다.