[CSS] 헷갈리는 flex 재정리 + 가로분할 세로분할 예제

사전 준비

flex의 속성은 크게 큰 테두리에 있는 컨테이너에 적용하는 속성과 컨테이너 안의 아이템들에 적용하는 속성으로 나뉩니다. 사용하기 전에 컨테이너에는 display : flex; 속성을 넣어줍니다.

 

.container {
	display: flex;
}

 

그러면 아이템들이 가로 방향으로 배치되고 자신이 가진 내용물의 width 만큼 차지합니다. height는 컨테이너의 높이만큼 자동으로 늘어납니다. 비슷한 것으로 inline-flex는 아이템의 배치보다는 컨테이너와 주변 요소와의 관계를 결정합니다.

 

 

아이템 배치 축 결정

아이템들의 배치되는 축 (가로, 세로) 결정은 flex-direction을 사용합니다. row, row-reverse, column, column-reverse가 있습니다. 줄 넘김 설정은 flex-wrap을 사용합니다.

 

.container {
	flex-direction: row;
}

 

 

 

아이템 정렬 방식

아래와 같이 설정합니다. (좌->우, 우->좌) flex-start, flex-end, center, space-between, space-around 등이 있습니다.
flex-start는 아이템들을 시작점으로, flex-end는 끝점으로, center는 가운데로 정렬합니다. space-between은 사이에 균일한 간격을 넣어주며 space-around는 아이템 둘레에 균일한 간격을 만듭니다. space-evenlh는 아이템 사이와 양 끝에 균일한 간격을 만듭니다.

 

 

.container {
	justify-content: flex-start;
}

 

쌓는 방식의 수직축 규칙은 align-items로 설정합니다. stretch는 수직축 방향으로 끝까지 늘어나는 것, flex-start는 아이템들을 시작점으로 정렬하는 것, baseline은 텍스트 베이스 라인 기준으로 정렬하는 것입니다. flex-wrap: wrap;이 설정된 상태에서 아이템들의 행이 2줄 이상일 때 align-content는 여러 행 정렬을 조절할 수 있습니다.

 

.container {
	align-items: flex-start;
}

 

 

기타 다양한 옵션들은 아래 포스팅이 정리가 잘 되어있습니다. 아래의 링크를 보고 내용을 요약한 것이 이 포스팅이기도 합니다.

studiomeal.com/archives/197

 

 

실습

flex로 container 역할을 하는 큰 div 안에 item 역할을 하는 div 두 개를 만든 다음, 2개의 item들을 동적으로 가로분할, 세로분할하여 화면 분할 형태를 바꾸는 걸 하나 만들어보았습니다. html과 js, jQuery, css를 사용했습니다.

 

 

 

* jQuery insertAfter : www.thewordcracker.com/jquery-examples/change-the-order-of-elements-using-jquery/