choco's story

flexbox 관련 속성flexbox는 아래와 같은 속성들을 함께 사용할 수 있습니다.주축 배치 : justify-content교차축 배치 : align-items교차축 개별 요소 배치 : align-self줄바꿈 여부 : flex-wrap하나씩 살펴보도록 하겠습니다.flexbox의 justify-contentjustify-content 란?: flex 컨테이너 내에서 요소들이 배치되는 주축(main-axis)을 기준으로 어떻게 정렬할지를 지정해 주는 속성flex-direction을 통해 주축(main-axis)으로 배치되는 요소들을 어떻게 정렬할지 따로 또 세부적으로 설정하는 속성이 justify-content 입니다.justify-content는 아래와 같은 5개의 속성값을 가집니다.flex-star..

flexboxflexbox 란?박스 내 요소 간의 공간 배분과 정렬 기능을 제공하기 위한 1차원 레이아웃 모델여기서 flexbox를 1차원 모델이라 부르는 이유는, 레이아웃을 다룰 때 한 번에 하나의 차원만 다루기 때문입니다.즉 한 번에 행, 또는 열 하나만 다룹니다. (동시에 X)flexbox 만들기flexbox는 flex 컨테이너라고도 불립니다. (= 요소들을 포함)flexbox를 만들기 위해선, 컨테이너가 되는 요소에 display: flex;를 적용하면 됩니다.ex)flexbox 적용 전... 요소1 요소2 요소3 flexbox 적용 후 요소1 요소2 요소3 각 요소가 개별로 취급되어 위에서부터 하나씩 쌓이던 것을 di..