컴퓨터 공부하는 블로그 컴퓨터 공부하는 블로그

'flex-wrap'이란? 플렉스 박스의 베이스라인에 더이상 여유가 없을 때 플렉스 아이템을 다음 줄로 넘길지 설정하는 것. 아래와 일반적으로 박스가 나열되있는 상황에서 브라우저 창의 크기를 줄이면 아래 사진처럼 변경된다. 하지만 'flex-wrap'을 속성값으로 줬을 때는 아래와 같이 줄을 넘겨서 정렬해준다. 'flex-wrap'의 속성값 'flex-wrap'의 속성은 다음과 같이 설정해준다. flex-wrap: 속성값; 속성값 설명 nowrap 기본 설정. 플렉스 아이템이 다음줄로 넘어가지 않음. 대신 아이템 너비를 줄여서 한 줄에 배치시킴. wrap 플렉스 공간에 여유가 없으면 다음 줄로 넘김. wrap-reverse 플렉스 공간에 여유가 없으면 다음줄로 넘김. 단 reverse의 경우 역으로 아래..

align-items란? 'align-items' 속성을 이용하면 아이템들을 교차축(Cross Axis)기준으로 정렬할 수 있다. 'align-items'의 속성값으로 줄 수 있는 값은 다음과 같다. align-items: 속성값; 속성값 설명 stretch 기본 설정임. 플렉스 아이템 높이가 컨테이너 높이와 같게 변경된 뒤 연이어 배치됨. flex-start 수평축이 메인축일 때 교차축인 수직축 위쪽부터 정렬 수직축이 메인축일 때 교차축인 수평축 좌쪽부터 정렬 flex-end 수평축이 메인축일 때 교차축인 수직축 아래쪽부터 정렬 수직축이 메인축일 때 교차축인 수평축 우쪽부터 정렬 center 수평축이 메인축일 때 교차축인 수직축 가운데 정렬 수직축이 메인축일 때 교차축인 수평축 가운데 정렬 baseli..

justify-content는? 'justify-content' 속성을 이용하면 아이템들을 메인축 기준으로 정렬할 수 있다. 'justify-content'의 속성값으로 줄 수 있는 값은 다음과 같다. justify-content: 속성값; 속성값 설명 flex-start 기본 설정값과 같은 값. 수평축이 메인축일때 수평축 좌측부터 정렬. 수직축이 메인축일때 수직축 위쪽부터 정렬. flex-end 수평축이 메인축일 땐 수평축 우측부터 정렬. 수직축이 메인축일 땐 수직축 아래부터 정렬. center 수평축이 메인축일 땐 수평축 가운데 정렬. 수직축이 메인축일 땐 수직축 가운데 정렬. space-around 아이템 간에 동일한 간격을 주고 나열한다. 수평축이 메인축일 땐 수평축 기준 아이템끼리 동일한 간격으..

플렉스 아이템의 정렬 기준 플렉스 컨테이너 안의 각 아이템들은 어떠한 가상의 정렬 기준에 의해 정렬된다. 예를 들어 'display' 속성의 속성값으로 'flex'를 주면 수평축을 메인축으로 요소들이 정렬된다. 그리고 이러한 메인축은 'flex-direction' 속성으로 변경해줄 수 있다. 'flex-direction'의 속성값으로 줄 수 있는 값은 다음과 같다. flex-direction: 속성값; 속성값 설명 row 수평축을 메인축으로 설정. 왼쪽에서 오른쪽으로 아이템 나열. row-reverse 수평축을 메인축으로 설정. 오른쪽에서 왼쪽으로 아이템 나열. column 수직축을 메인축으로 설정. 위에서 아래로 아이템 나열. column-reverse 수직축을 메인축으로 설정. 아래에서 위로 아이템 ..