flexbox 요소들의 배치 방법에 관한 속성 플렉스 박스 속성들을 사용하여 주축과 교차축을 기준으로 요소들을 어떻게 배치할지 선택할 수 있다. 지난 글에 플렉스 박스(1) 이은 글 2021.12.09 - CSS 플렉스 박스 (1) 속성 내용 justify-content 주축 배치 방법 align-items 교차축을 기준으로 요소 배치 방법 align-self 교차축을 기준으로 개별요소 하나하나의 배치 방법 flex-wrap 줄 바꿈 여부 flex-wrap 은 요소의 내용이 너무 많아서 flex 컨테이너 축의 길이를 넘을 때 자동 줄 바꿈을 할 것인지에 대한 결정 속성이다. (참고: justify의 뜻: 행의 끝을 나란히 맞추다.) 1-1. justify-content:center; 적용 전 적용 전 결..

CSS 플렉스박스, flexbox 1. flex 박스란 박스 속 각 요소들의 공간 배분과 정렬 기능을 제공하는 1차원 레이아웃 모델이다. flex 컨테이너라고도 부른다. 즉 그 속에 요소들을 포함하고 그 요소들 간의 레이아웃을 결정하는 역할을 한다. flexbox를 1차원 모델이라 부르는 이유: 레이아웃을 한 번에 하나의 차원만을 다루기 때문이다. 즉 행 또는 열 만을 다룬다. flex 박스가 행을 다룰 때는 요소를 가로 방향으로 진행 시키고 열을 다룰 때는 요소를 새로 방향으로 진행 시킨다 2. 구문 flex 컨테이너를 만들기 위해서는 컨테이너에 디스플레이 속성에 속성값 flex를 적용한다. display: flex; 3. flex 박스 적용방법 1) 적용전 컨테이너 div(네모 상자 4개를 포함하고 ..