HTML & CSS & JavaScript (2) 썸네일형 리스트형 플렉스 박스 레이아웃의 정렬 속성 이번 포스팅에는 플렉스 아이템을 정렬할 수 있는 속성을 살펴보도록 하겠습니다. 1. Justify-content 속성 justify-content 속성 는 플렉스 아이템을 주축 방향으로 정렬할 때 사용하는 속성입니다. .flex-container{ display: flex; justify-content: flex-start; /* flex-end, center, space-between, space-around, space-evenly */ } justify-content 속성값 속성값 설명 flex-start 주축 방향의 시작을 기준으로 정렬합니다. flex-end 주축 방향의 끝을 기준으로 정렬합니다. center 주축 방향의 중앙에 정렬합니다. space-between 플렉스 아이템 사이의 간격이 .. 플렉스 박스 레이아웃의 기본 속성 플렉서블 박스 레이아웃(flexible box layout)은 1차원 방식으로 효과적으로 레이아웃을 설계할 수 있도록 고안된 스타일 속성입니다. 여기서 1차원이란 가로나 세로 중 한 방향을 의미합니다. 구성 요소 주축(main axis) : 플렉스 박스의 진행방향과 수평한 축을 뜻합니다. 교차축(cross axis) : 주축과 수직한 축을 뜻합니다. 플렉스 컨테이너(flex container) : display 속성 값으로 flex나 inline-flex가 적용된 요소를 뜻합니다. 플렉스 아이템 (flex item): 플렉스 컨테이너와 자식 고나계를 이루는 태그 구성 요소를 뜻합니다. 플렉스 박스 레이아웃은 크게 플렉스 컨테이너와 플렉스 아이템으로 구성됩니다. 그래서 HTML 요소도 flex-contai.. 이전 1 다음
