Why flex-box?
CSS에서 제일 힘든 것은 내가 원하는대로 요소들의 레이아웃을 짜는 것이다. 기본적으로 웹사이트는 수직 구조이기 때문에, 수직 구조로 block 형태로 표현된 요소들을 수직적으로 정렬하는 것은 쉽다. 하지만 수평 구조를 만드는 속성이 명확하지 않았는데, 이때 가장 등장한 것이 flex box이다.
CSS에서 flex는 너무 너무 너무 중요하다!
flexboxfroggy?
flex를 쉽게 배울 수 있게 도와주는 사이트이다. 아래와 같이 flex 속성을 이용하여 연못 잎에 개구리를 잘 배치하면 된다.
개구리와 놀면서 flex를 열심히 배워보았다.
헷갈릴만한 부분만 ✅체크하여 집중적으로 보려고 한다.
1. justify-content
flex-start, flex-end, center는 직관적으로 잘 와닿는다.
✅ space-between/around/evenly
justify-content: space-between;
: container에서 아이템을 똑같은 거리만큼 떨어뜨려서 정렬. 양끝에서부터 아이템 정렬 시작.
justify-content: space-around;
: container에서 아이템을 똑같은 거리만큼 떨어뜨려서 정렬. 양끝에서부터 그 거리의 반만큼 떨어진 곳에서부터 아이템 정렬 시작.
justify-content: space-evenly;
: container에서 아이템을 똑같은 거리만큼 떨어뜨려서 정렬. 양끝에서부터 그 거리만큼 떨어진 곳에서부터 아이템 정렬 시작.
Example with space-around
align-items: flex-end;로 개구리들을 맨 밑줄로 보내고,justify-content: space-around;로 개구리들을 연못들에 배치해주었다.
양끝단에서 아이템까지의 거리가 대충 1이라 치면, 양끝이 아닌 내부의 아이템들 사이의 거리는 대충 2 정도이다. 그렇다면 space-around를 써야하는것이다!
2. align-items
align-items: stretch;: 컨테이너 양끝까지 아이템들이 늘어난다.align-items: baseline;: 컨테이너의 baseline을 기준으로 정렬된다.
✅ flex-start vs baseline
-
대체적으로는 둘에 별 차이가 없다.
-
다만 컨테이너 안의 폰트 사이즈들이 다르다면 차이가 생긴다!
https://stackoverflow.com/questions/34606879/whats-the-difference-between-flex-start-and-baseline
- flex-start 는 컨테이너의 맨 위를 기준으로,
- baseline 은 컨테이너 안에 글씨가 있다면 글씨의 바닥을 기준으로 정렬된다. 폰트 사이즈들이 다 다르다면 제일 큰 폰트의 베이스라인을 기준으로 정렬된다!
3. align-content
✅ align-items vs align-content
align-items: 동일한 row에 정렬된 아이템을 정렬할 때
align-content: 여러 row에 걸쳐있는 아이템을 정렬할 때
