1 - Flex box
뷰포트나 요소의 크기가 불명확하거나 동적으로 변할 때에도 효율적으로 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는 레이아웃 방식이다.
flexbox는 복수의 자식 요소인 flex item과 상위 부모요소인 flex container로 구성된다.
정렬하는 요소의 부모 요소에 display: flex 속성을 선언하면 된다.
flex item은 주축(main axis)에 따라 정렬되고 주축의 방향은 flex container의 flex-direction 속성으로 결정한다.2 - 부모 요소와 자식 요소에 정의하는 속성구분
flexbox에서 사용하는 속성은 부모 요소인 flex container에 정의하는 속성과 자식 요소인 flex item에 정의하는 속성으로 나누어진다.
전체적인 정렬이나 흐름에 관련된 속성은 flex container에 정의하고, 자식 요소의 크기나 순서에 관련된 속성은 flex item에 정의한다.
display: inline-flex는 컨테이너가 주변 요소들과 어떻게 어우러질지 결정하는 값이다. 컨테이너가 block이 아닌 inline으로 들어간다.
flex container 속성: flex-direction, flex-wrap, justify-content, align-items, align-content
flex item 속성: flex, flex-grow, flex-shrink, flex-basis, order, align-self
3 - Flex container 속성
1) flex-direction: flexbox의 축 정렬 방법
- row가 기본값
- column은 main-axis(주축)이 세로로 변경
- reverse는 배치를 반대로 하지만 요소의 위치는 그대로 유지한다.
2) justify-content: flexbox의 main-axis 축 정렬
- flex-direction의 방향에 따라 바뀐 주축의 정렬을 지정
- flex-start가 기본값
- flex-end는 주축의 끝으로 붙는다.
- center는 주축의 중앙 부분으로 배치된다.
- space-around는 요소들을 일정한 간격을 두고 배치한다.
- space-between는 시작과 끝 요소에 붙은 뒤 일정한 간격을 두고 배치한다.
- space-evenly는 요소의 양옆 간격을 같게 두고 배치한다.
3) align-items: flexbox의 cross-axis 축 정렬
- flex-direction의 방향에 따라 바뀐 cross-axis의 정렬을 지정
- stretch가 기본값으로 아이템들이 수직축 방향으로 끝까지 늘어난다.
- flex-start는 아이템들을 시작점으로 정렬, flex-direction이 row일 때는 위, column일 때는 왼쪽이다.
- flex-end는 아이템들을 끝으로 정렬, flex-direction이 row일 때는 아래, column일 때는 오른쪽이다.
- center는 cross-axis의 중앙 부분으로 배치된다.
- baseline은 아이템들을 텍스트 베이스 라인 기준으로 정렬된다.
4) align-content: flexbox의 cross-axis 축 정렬로 flex-wrap: wrap;이 설정된 상태에서
아이템들의 행이 2줄 이상 되었을 때의 수직축 방향 정렬을 결정하는 속성이다.
- justify-content에서 사용하는 속성들을 사용한다.
5) flex-wrap: flex items의 여러 줄 묶음(줄 바꿈) 설정
- nowrap이 기본값
- wrap으로 바꾸게 된다면 아이템들이 한 줄에 꽉 차게 되면 자동적으로 다음 라인으로 넘어간다.
- wrap-reverse는 요소가 나열되는 시작점과 끝점의 기준이 반대로 적용된다.
6) flex-flow: flex-direction과 flex-wrap의 단축 속성으로 한 줄 작성이 가능하다.4 - Flex item 속성
1) order 속성 : item의 순서 부여
2) flex-grow: 컨테이너를 꽉 채우는 속성
기본값은 0
flex-grow:1; 컨테이너의 남은 여백을 채움
3) flex-shrink: 컨테이너가 작아졌을 때 아이템이 작아지는 비율
기본값은 0
flex-shrink: 1;
4) flex-basis: 아이템들이 공간을 얼마나 차지해야하는 지 세부적으로 명시(아이템의 영역을 제외한 공간)
기본값은 auto
flex-basis:60%; (단위를 적어야한다.)
5) align-self: 아이템 별로 정렬
6) flex를 사용해 grow, shrink, basis를 한 줄에 작성할 수 있다.
- 값이 한 개인 경우 number를 지정하는 경우 flex-grow, length 또는 %를 지정하면 flex-basis가 된다.
- 값이 두 개인 경우 첫 번째 값은 반드시 number이어야 하며 두 번째 값으로 number를 지정하면 flex-shrink가 되고,
length나 % 또는 auto를 지정하는 경우 flex-basis가 된다.
- 값이 세 개인 경우 grow, shrink, basis 순으로 작성한다.
7) 속성값으로 initial, auto, none과 같은 키워드도 사용할 수 있다.
- initial(= flex: 0 1 auto;): 기본값
- auto(= flex: 1 1 auto;): 컨테이너 크기에 따라 아이템이 늘어나기도 하고 줄어들기도 하며 여백을 없앤다.
- none(= flex: 0 0 auto;): 늘어나지도 줄어들지도 않는다.
Hello World!