flexbox 는 중요한 3가지 개념이 있다.

  1. Container와 Item 에 대한 속성
  2. 중심축과 반대축에 이해 
  3. justify-content, align-content  에 대한 속성

1. Container 와 Item 에 대한 속성 이해 

flex 구조

flex는 container와 item으로 구분되며 각각 지정할 수 있는 속성이 정해져 있다. 

Container 속성 (flex 요소들을 감싸는 태그)

display flex
flex-wrap nowrap(한줄로 표현), wrap 
flex-direction 중심축 지정 : row(기본값, 수평), column(수직)  
flex-flow column nowrap 으로 지정가능
justify-content 중심축 아이템 배치
align-items 반대축 아이템 배치
align-content 반대축 justify-content와 비슷 nowrap일 경우 의미 없음

Item 속성 (flex 요소)

order 아이템 속성을 변경할 수 있음
flex-grow 화면사이즈 증가시 특정 아이템 가중치(0~1)
flex-shrink 화면사이즈 감소시 특정 아이템 가중치(0~1)
flex-basis 화면사이즈 변경시 아이템별 가중치를 퍼센트(%) 로 지정
align-self 컨테이너와 배치 상속하지 않고 아이템만 따로  설정

2.  중심축과 반대축 이해하기 

flxe-direction을 row 로 할 경우 중심축은 수평선 (파랑색) 이며 되며 반대축은 수직선이 된다. 

flexl-direction을 column으로 하면 수직선이 중심축이 된다. 

3. justify-content, align-content  값 

참고 : https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

flex-start 왼쪽에서 부터 정렬
flex-end 오른쪽에서 정렬
space-around 플렉스 요소는 앞, 뒤, 그리고 요소들 사이에도 모두 여유 공간을 두고 배치 (간격 1:2:2:2:1)
space-evenly 플렉스 요소를 일정한 크기로 배치 (간격 1:1:1:1:1)
space-between 플렉스 요소는 요소들 사이에만 여유 공간을 두고 배치됩니다.  (간격 3:3:3)

 

+ Recent posts