KARIU의 IT 블로그

CSS의 Flexbox를 공부하다보면 align-items, align-self, align-content 등 align에 관련된 속성이 많이 있어서 헷갈리는 경우가 있습니다. 이 글을 다 읽으면 아마 명확하게 이들의 차이점을 알 수 있게 될 겁니다. 먼저, align에 대한 속성은 교차축(기본적으로 세로방향)에 대한 위치를 설정해줍니다. align-items align-items는 교차축에 위치한 모든 요소들의 위치를 정해줍니다. Tips) items 이므로 모든 아이템들을 움직여준다라고 알아두시면 편합니다. align-self align-self는 교차축에 위치한 모든 요소들의 위치를 지정해주는 것이 아닌 특정 요소의 위치만 지정해줄 수 있습니다. Tips) self이므로 혼자, 즉 자기만 움직일 수..

목차 Flexbox란? Flexbox 사용법 Flexbox의 방향축 메인 축 설정 (flex-direction) justify-content의 속성 align-items의 속성 align-self flex의 줄바꿈 설정 (wrap, nowrap, wrap-reverse) 위 아래 줄 사이의 공간 조절(align-content) 특정 요소의 크기만 바꾸고 싶어. (flex-grow, flex-shrink) 1. Flexbox란? 플렉스박스(Flexbox)는 유동적으로 각 요소들을 배치하는 기법입니다. 예를 들어, 각 사용자들마다 화면 크기가 다른 전자기기를 이용하여 웹사이트를 보게 될텐데 각 화면에 맞는 배치를 일일이 계산할 필요 없이 Flexbox를 이용하여 손쉽게 구성할 수 있습니다. 또한 Flexbo..