✍️ CSS flexbox
✏️ Flexbox 개요
display: flex; 가 탄생한 배경
부모 container가 5개의 자식 요소를 갖고 있고 해당 자식 요소를 부모 container의 크기에
나란히 넣고 싶다고 하자.
display: flex; 라는 개념이 있기 전에는 display: inline-block; 을 통해 자식 요소를 나란히
배열하였지만 1) inline 요소가 있어 자식과 자식 간의 공간이 생기는 문제가 있었고 해당 문제를 해
결하기 위해선 자식 요소의 태그를 서로 붙여서 써주어야 했다.
위와 같은 문제를 해결하기 위해서 자식 요소에 display: inline-block; 을 사용하는 대신 부모에
display: flex; 를 사용함으로써 위와 같은 문제를 해결하게 되었다.
✏️ flex container, flex item, main axis, cross axis
container: display: flex가 적용된 요소
item: container에 들어가는 요소
main-axis: 수평축
corss-axis: 세로축
✏️ Container - display
display: flex;
1) display를 사용할 때 해당 요소 안에 있는 items들을 어떻게 처리 할 것인지
2) 나 자신을 둘러싼 외부 요소와는 어떻게 처리할 것인지를 생각해서 결정해 주어야한다.
✏️ Container - flex-direction
주축 및 방향을 지정하는 property
1) 주축을 '수평'으로 할 지 '수직'으로 할지
1-1) flex-direction: row;
1-2) flex-direction: column;
2) 주축의 방향을 '정방향'으로 할지 '역방향'으로 할지
2-1) flex-direction: row-reverse;
2-2) flex-direction: column-reverse;
한가지 주의해서 보아야 할 점은 row-reverse로 설정했을 때 parent의 width의 오른쪽 끝
에 붙어서 배치된다.
column-reverse로 설정 할 경우 왼쪽 아래 끝에서 부터 순차적으로 배치된다.
✏️ Container - flex-wrap, flex-flow(shorthand)
flex-wrap: nowrap;
flex-wrap: wrap;
viewport 내에서 container의 자식 요소의 width와 height를 유지하게 한다.
flex-flow: (arg1, arg2)
arg1 arg2
row wrap
row-reverse no-wrap
column wrap-reverse
column-reverse
1) 높이는 충분하나 컨테이너의 폭이 작아 요소들을 다 담지 못할 때 자식요소가 다음줄로 넘어가서
순차적으로 배치된다.
2) 폭은 충분하나 컨테이너의 높이가 작아 요소들을 다 담지 못할 옆으로 넘어가서 위에서부터
순차적으로 아래로 쌓는다.
1 상황에서 flex-flow: row-reverse wrap-reverse; 가 적용될 경우
(오른쪽 끝 and 오른쪽 아래)에서 왼쪽으로 순차적으로 쌓는다.
1 상황에서 flex-flow: row-reverse wrap; 가 적용될 경우
(오른쪽 끝)에서 왼쪽으로 요소를 거꾸로 쌓는다.
2 상황에서 flex-flow: column-reverse wrap-reverse; 가 적용될 경우
아래 오른쪽 끝에서 위로 순차적으로 쌓아서 올린다.
2 상황에서 flex-flow: column-reverse reverse; 가 적용될 경우
아래 왼쪽 끝에서 위로 거꾸로 쌓아서 올린다.
✏️ Item - order
(flex or grid) items에서 순서를 결정해주는 속성이다.
조건
부모 클래스에 flex or grid가 적용되어 있어야 한다.
order: <integer>;
order: 음수;
items들 중 맨 앞에 위치하게 된다.
html code가 변경되지는 않는. 순서를 바꾸어 보여 줄 뿐이다.
order: 0;
0아 default 이다.
order: 양수;
items 중 맨 뒤에 위치하게 된다.
✏️ flex - grow
flex-grow: <number>;
number에는 0부터 양수 값이 들어간다.
컨테이너보다 아이템들이 작아서 남는 공간이 생기는 것이 위 속성을 사용하데 필요한 조건이다.
남는 공간에 대해서 형제 요소들이 나누어 빈 공간을 채운다.
flex-grow: 0; 일 경우 남는 공간에 대해서 아무 것도 갖지 않는다.
만약 형제 요소들에게 서로 다른 양수의 값을 주게 되면 남은 공간에 대해서 서로 다른
비율로 나누어 갖게된다.
✏️ flex - shrink
item이 감소하는 너비의 비율을 설정한다.
숫자가 크면 더 많은 너비가 감소한다.
item이 가변 너비가 아니거나, 값이 0일 경우 효과가 없다.
Container의 너비가 줄어 item의 너비에 영향을 미치기 시작한 지점부터 실제 줄어든 거리가
90px일 때 요소 너비가 같은 Item이 2개이고 지정된 감소 너비가 각각 2와 1이라면,
감소 너비는 2:1 비율이며,
첫 번째 Item은 90px의 2/3인 60px 만큼 너비가 감소하고,
두 번째 Item은 90px의 1/3인 30px 만큼 너비가 감소한다.
