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

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

'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 아이템 간에 동일한 간격을 주고 나열한다. 수평축이 메인축일 땐 수평축 기준 아이템끼리 동일한 간격으..

플렉스 박스란? 레이아웃 모델로서 서로 다른 크기의 화면과 기기에서도 HTML 요소들이 자동으로 재정렬되고 언제나 레이아웃을 똑같이 유지할 수 있게 만들어준다. 플렉스 박스의 구성 아이템 1 아이템 2 아이템 3 플렉스 박스는 플렉스 컨테이너와 플렉스 아이템으로 구성된다. 플렉스 박스는 플렉스 아이템들을 하나로 묶어주는 역할을 한다. 그리고 박스 안에서 아이템들이 어떻게 배치될지 설정을 해준다. 플렉스 박스 설정하기 아이템 1 아이템 2 아이템 3 아이템 4 아이템 5 HTML 상으로는 여러 아이템을 묶어줄 박스를 만들어주고 그 박스는 플렉스 컨테이너로 활용한다. 그리고 박스 안에 들어간 각 아이템들은 플렉스 아이템으로 이용해준다. 예시에선 우선 아이템으로 활용할 태그를 여러개 만들어줬다. 그후 태그를 ..