flex
위스타그램 css에서 헷갈리는 부분이 있어서 flex개념을 제대로 정리해보려고 한다!
flex box안의 item들은 flex-direction을 row나 column으로 설정해줌에 따라 수평으로(horizontally) 혹은 수직으로(vertically) 정렬된다.
여기서 기준이 되는 (main direction)이 바로 main axis이다.
(flexbox속에 main-axis는 flex-direction property로 결정된다.
이때 'row/row-reverse/column/column-reverse' 4가지 값이 있다. row는 요소들을 텍스트 방향과 동일하게 정렬, row-reverse는 반대로 정렬한다. column은 요소들을 위에서 아래로, column-reverse는 요소들을 아래서 위로 정렬한다!)
링크텍스트 내용을 참고했다.
이미지에서 보다시피 요소들이 row를 따라 수평으로 정렬되었을 때 horizontal이 main axis가 되고 vertical이 cross axis가 된다. 반대로 요소들이 column을 따라 수직으로 정렬되었을 때는 vertical이 main axis가 되고 horizontal이 cross axis가 되는 것이다.
쉽게 말해서 flex-direction을 row로 설정하느냐 column으로 설정하느냐에 따라 main axis이 상대적으로 변한다.
justify content
display: flex 를 주었을 때 main axis의 방향으로 (dafault: horizontal) 아이템들을 주변에 space를 분배할때 사용된다.
대표적인 6가지 value를 살펴보자.
justify-content: start;
justify-content: center;
justify-content: end;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;
그림으로 보면 이해가 빠르다!
첫번째 start는 요소들을 말그대로 start 지점인 컨테이너의 왼쪽으로 정렬한다.
center은 중앙으로, end는 컨테이너의 끝인 오른쪽으로 정렬한다.
여기까지는 이해하기 어렵지 않다.
뒤의 세가지가 예시를 보기 전에 좀 헷갈렸는데 space-between은 요소들 사이에 동일한 간격을 두는 것이고 space-around는 요소들 주위에 동일한 간격을 두는 것이다.
- mdn 참조
Space between: Distribute items evenly. The first item is flush with the start, the last is flush with the end
Space-around:Distribute items evenly. Items have a half-size spae on either end.
두 가지 value 모두 item을 evenly(균등하게) 정렬한다는 점에서 공통점을 가진다. 그런데 space-between은 start지점에서 시작지점과 끝지점에 item을 각각 배치하고 그 사이사이에 균등한 공간 space를 넣어주는 반면에 space-around는 아이템의 양 측면에 각각 half-size space를 넣어준다. 즉 space-around는 start지점에 half-space가 생기고 아이템들 사이에는 half-space x 2의 space가 생기는 것이다.
space-between:
space-around:
between과 around의 차이만 제대로 인지하자.
그렇다면 space-evenly는 무엇일까...space-around와 비교하면 이해가 간다.
space-around는 양측면을 각각 half-space씩 공간을 부여하므로 아이템 1과 2가 있을 때 1과 2사이는 half space x 2만큼의 공간이 부여된다.
아이템 1과 2가 가로(row)로 배열되어 있다고 가정할 때
아이템 1 왼쪽의 space = x
아이템 1과 2 사이의 space = 2x
아이템 2 오른쪽 space =x
반면에 space-evenly는
말그대로 space를 균등하게 부여하는 것이다.
아이템 1 왼쪽의 space = 아이템 1과 2 사이의 space = 아이템 2 오른쪽 space
alingn-content/ align-items
다음으로 align-items은 cross axis을 기준으로 item을 위치시킨다. Flex-box의 flex direction이 row일 경우에cross axis은 수직이다.
align-items의 대표적인 properties는 다음과 같다
_
align-items: stretch;
align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: baseline;
마찬가지로 start는 main axis인 를 기준으로 컨테이너의 시작점에 아이템을 위치시키고 center은 중간, end는 끝에 위치시킨다.
stretch는 container의 교차 축을 채우기 위해 item을 (stretch)늘린다.
baseline은 item을 문자 기준선에 정렬한다.
align-content
6가지 value가 있다.
align-content: flex-start;
align-content: flex-end
align-content: center;
align-content: space-between;
align-content: space-around;
align-content: stretch;
flex로 item 정중앙 위치시키기
그렇다면 flex로 item을 정중앙에 위치시키려면..?!
.container {
display:flex;
justify-content:center;
align-items:center;}
align-item과 justify-content 둘다에 center 값을 부여하면 된다!
flex를 사용하면 정중앙 배열을 쉽게 할 수 있다!
또 위의 그림과 같이 6개의 아이템들이 있다고 가정했을 때 한 가지 아이템만 따로 위치시키는 방법도 있다. align-self property를 이용하면 된다.
.container div:nth-child(6) { align-self: flex-end; ```}
order property
order property는 아이템을 순서대로 나열할 수 있게 해준다. 가장 낮은 숫자가 부여된 아이템들부터 순서대로 배열된다. 만약 두 개 이상의 아이템들에 같은 order이 부여된다면 먼저 부여받은 순서대로(source order) 나열된다.
예를 들자면..
item1: order:3
item2: order:2
item3: order:1
item4: order:1
의 경우에 item3, item4, item2, item1 의 순으로 재배열된다.
(*플렉스 아이템들의 default order값은 0이기 때문에 0보다 큰 순서대로 배열된다. 따라서 한 가지 아이템을 첫번째로 고정시키고 나머지 아이템들의 순서는 그대로 두고 싶을 때 order:-1을 쓸 수 있다.)
이 외에도 value 값들이 다양한데 하나하나 다 적기에는 시간이 너무 소요되서 모르는 value가 나올 때마다 찾아보고 헷갈리는것만 추후에 추가해야 될 것 같다. 그렇게 어려운 개념이 아닌데 한번 읽고 쓱 지나갔더니 금방 까먹고 다시 찾아보게 된다.. 그래도 한 번 정리하니까 확실히 이해되고 flexbox froggy 게임도 잘 풀린다.
flex 이해하기 성공~~
ps. perpendicular: 직각의, 수직적인 (오늘 배운 새로운 단어)
