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

'align-content'이란? 'align-item'과 비슷하다. 하지만 'align-content'란 아이템이 아닌 아이템 라인을 정렬한다. 단, 'align-content'를 제대로 써주기 위해선 'flex-wrap'이 적용되서 라인이 두 줄이상 되어야 한다. 'align-content'의 속성값 'align-content'의 속성은 다음과 같이 설정해준다. align-content: 속성값; 속성값 설명 stretch 기본 설정값. flex-start 플렉스 아이템을 한 곳으로 모아서 공백없이 나열한다. 이때 수평축이 메인축일 때 교차축인 수직축 위쪽부터 정렬. 이때 수직축이 메인축일 때 교차축인 수평축 위쪽부터 정렬. flex-end 플렉스 아이템을 한 곳으로 모아서 공백없이 나열한다. 이때 ..

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