[CSS] CSS Flex (Flexbox)

1. flexbox 사용 이유 flexbox란 화면의 크기가 동적으로 변할 때에도 효율적으로 요소를 배치할 수 있게 해주는 css3의 레이아웃 방식이다. 사용하는 이유를 확실하게 보고 가자. 아래와 같은 박스들이 있다고 해보자. 이를 flexbox 없이 같은 간격으로 나눈다고 해보자. 아래와 같이 margin-left를 사용하여 잘 나눴다. .p1 { height: 500px; } .c1 { width: 300px; height: 300px; background-color: yellow; border: 1px solid black; display: inline-block; } .c1:nth-child(2) { margin-left: 250px; } .c1:nth-child(3) { margin-left: 250px; } 얼핏 보기에는 잘 나눈 것 같지만, 사실 여기에는 큰 문제가 하나 있다. 작업하고있는 내 컴퓨터 안에서만 이렇게 보인다는 점이다. 픽셀로 margin-left를 준 ...

원문링크 : [CSS] CSS Flex (Flexbox)