플랙스
-
Fluid layouts with Flexbox이거 공부 했더니 어때?/HTML & CSS & JS 2020. 10. 28. 05:15
이번시간에는 배열하는 방법 중 하나인 flex, 플렉스에 대해 배워 보도록 하겠습니다. flex, 플렉스가 등장하기 전에 있었던 여러 문제점들은 flex, 플렉스를 사용함으로써 해결할 수 있습니다. flex, 플렉스가 어떤 문제들을 해결 하였는지를 살펴 보도록 하겠습니다. 박스 3개를 만든 후, 배경색은 빨간색, 폭은 200px, 높이는 200px로 설정하고, 디스플레이는 inline-block으로 설정 하겠습니다. 여기서 박스를 더 추가 하게 되면, 박스들이 inline-block 디스플레이 형태로 나란히 옆으로 나열되는 것이 아니라, 박스들이 자리를 충분히 차지했다면, 아래쪽으로 이어 붙는다는 것을 확인할 수 있습니다. 이러한 문제점 뿐만 아니라, 여기에 margin을 넣어주면, 자동으로 완성되는 그..