flexbox
'flexbox'는 모던 웹을 위하여 제안된 기존 layout보다 더 세련된 방식의 니즈에 부합하기 위한 CSS3의 새로운 layout 방식이다.
'flexible'이라는 단어처럼 유연한 레이아웃을 구성할 수 있으며,
flex-container, flex-item이 모두 존재해야만 적용이 가능하다.
사이트 참고.
'flex-container'는 말그대로 'item'을 감싸는 부모 역할,
'item'은 내부에 포함되는 자식 요소이다.
Flex의 속성은,
- container에 적용하는 속성
- item에 적용하는 속성
이렇게 두 가지가 있다.
container 속성
1) display: flex;
먼저, 컨테이너에 display: flex;를 적용한다. 이제부터 flex를 사용하겠다는 의미.
2) flex-direction
flex-direction 속성은 컨테이너의 주축(main axis) 방향을 설정한다.
- flex-direction: row;
왼쪽에서 오른쪽으로 수평 배치된다. flex-direction 속성의 기본값.- flex-direction: column;
위에서 아래로 수직 배치된다.- flex-direction: row-reverse;
오른쪽에서 왼쪽으로 수평 배치된다.
- flex-direction: column-reverse;
아래에서 위로 수직 배치된다.
3) flex-wrap
'flex-wrap'은 컨테이너가 더 이상 아이템들을 한 줄에 담을 여유 공간이 없을 때, 아이템 줄바꿈을 어떻게 할 것인지 결정하는 속성.
- nowrap : 기본값. 줄바꿈을 하지 않음. 자식의 사이즈를 줄여서라도 한 줄에 배치. 죽어도 한 줄에 다 넣음.
- wrap : 여러줄 아이템 배치 가능. 자식의 사이즈 지켜줌.
한 줄에 정렬하기에 공간이 넉넉하지 않으면 여러 줄 만듦.- wrap-reverse : 줄바꿈 함. 아이템을 역순으로 배치
4) justify-content
'justify-content'는 주축 방향으로 아이템을들 정렬하는 속성이다.
- flex-start : 기본값. 왼 -> 오. 왼쪽 정렬
- flex-end : 왼 -> 오. 오른쪽 정렬.
- center : 가운데 정렬.
- space-between : 요소 사이(between) 간격 동일.
- space-around : 요소 둘레(around) 간격 동일.
표시가 좀 이상하긴 하지만,,,
5) align-items
'align-items'는 교차축 방향으로 아이템을들 정렬하는 속성이다.
- stretch : 기본값. 쭉 늘어남.
만약, 아이템에 height가 설정되어 있다면, 설정된 높이만큼 차지.
- flex-start : 아이템들을 시작점으로 정렬.
flex-direction이 row(가로 배치)일 때는 위, column(세로 배치)일 때는 왼쪽.
↑ flex-direction이 row일 때.
flex-direction이 column일 때.
- flex-end : 아이템들을 끝으로 정렬.
flex-direction이 row(가로 배치)일 때는 아래,
column(세로 배치)일 때는 오른쪽.
↑ flex-direction이 row일 때.
↑ flex-direction이 column일 때.
- center : 가운데 정렬.
↑ flex-direction이 row일 때.
↑ flex-direction이 column일 때.
6) align-content
'align-content'는 flex-wrap: wrap;이 설정된 상태에서,
아이템들의 행이 2줄 이상 되었을 때의 교차축 방향 정렬을 결정하는 속성
- stretch : 기본값.
- flex-start
- flex-end
- center
- space-between
- space-around
item 속성
1) flex-basis
flex-basis는 Flex 아이템의 기본 크기를 설정
(flex-direction이 row일 때는 너비, column일 때는 높이)
기본값 auto는 width 너비만큼 차지.
네 번째 박스만 flex-basis : 200px, 나머지 박스는 flex-basis : auto 값을 줌.
2) flex-grow
'flex-grow'는 아이템이 flex-basis의 값보다 커질 수 있는지를 결정하는 속성이다. 숫자값을 넣으면 되며, 0이 기본값임. 이 속성을 사용하면, 유연하게 늘어나며 남은 공간을 차지하게 됨.
2번째 박스에 flex-grow : 2, 4번째 박스에 flex-grow : 1 적용.
3) flex-shrink
flex-grow와 쌍을 이루는 속성으로, 아이템이 flex-basis의 값보다 작아질 수 있는지를 결정하는 속성이다. flex-grow와 반대로 값을 주면 줄수록 크기가 줄어들고, 화면의 창이 줄어들면 효과를 확인할 수 있다.!
두 번째 박스에 flex-shrink: 3, 네 번째 박스에 flex-shrink: 2 적용.
4) order
각 아이템들의 시각적 나열 순서를 결정하는 속성으로, 숫자값 넣으면 됨.
작은 숫자대로 먼저 배치. 이 속성은 그저 가시적인 속성일 뿐, HTML 자체의 구조를 바꾸는 것은 x. 그렇기에 접근성 측면에서 사용에 주의해야 함. 특히나 스크린리더 사용자들에게 order를 이용해 순서를 바꾼 것은 의미가 없다는 것을 기억하자!
5) align-self
align-items가 전체 아이템의 교차축 방향 정렬이라면,
align-self는 해당 아이템의 교차축 방향 정렬!
auto, flex-start, flex-end, center, baseline, stretch
