24.01.27~28 <css 레이아웃>
<chapter 2. Flexbox>
🎁 1. flexbox
1) 정의
1차원으로 요소를 배치하는 방식.
2) 쓰는 법 (속성)
-1. 세로 or 가로 방향 설정 (flex-direction)
-2. 정렬 (justify-content, align-items)
- 앞부분, 뒷부분
- 양 끝
- 중앙 정렬
- 크기 등등
-3. 요소가 넘칠 때 (flex-wrap)
-4. 간격 (gap)
-5. 크기를 늘이거나 줄이기 (flex-grow, flex-shrink, flex-basis)
🎁 2. 배치방향 (flex-direction)
<container div -> flexbox로 만들고 배치방향을 정하기>
1) 디스플레이 블록 대신 flexbox 박스 만들기 -> 요소들이 원래 위에서 아래였다가, 왼족에서 오른쪽으로 배치 방식이 바뀜. (기본적인 flexbox의 방향이 가로이기 때문이다)
.container {
border: 5px dashed #cacfd9;
width: 500px;
height: 500px;
display: flex;
} 
개발자 도구로 들어가서 computed 속성을 show all로 해서 보면, flexbox-direction이 row로 되어있다. row는 '행'이라는 뜻이며 '가로'를 뜻한다.
2) 세로 방향으로 바꿔보기
블록 디스플레이와 겉으로는 같아 보이지만, 정렬이나 크기를 조절하는 법을 배우면 차이점이 드러날 것이다.
.container {
border: 5px dashed #cacfd9;
width: 500px;
height: 500px;
display: flex;
flex-direction: column;
} 
3) 반대 버전
- row-reverse 라고 쓰면 가로방향이지만, 오른쪽에서 왼쪽으로 정렬되며 오른쪽에 붙어있다.
- column-reverse라고 쓰면 세로방향이지만, 아래쪽에서 위쪽으로 정렬되며 아래쪽에 붙어있다.
🎁 3. 정렬 (justify-content, align-items)
1) 용어 정리
-1. 기본축(main axis) : 요소가 배치되는 방향
-2. 교차축(cross axis) : 기본축에 수직인 방향
💨기본적으로 요소들은 기본축 방향으로 순서대로 배치되고, 교차축 방향으로는 꽉채워서 정렬된다.
- ex) flex-direction의 값이 column일 때
- ex) flex-direction의 값이 row일 때
2) 기본축 방향에서 정렬 (justify-content) -> 지금 예시에서 기본축은 왼쪽에서 오른쪽
🔽 중앙정렬 justify-content: center;
.container {
border: 5px dashed #cacfd9;
width: 500px;
height: 500px;
display: flex;
justify-content: center;
}
-> justify-content 종류
- center
- flex-end(기본 축 맨 끝 정렬) = 왼쪽
- flex-front(기본 축 맨 뒤 정렬) = 오른쪽
- space-around(기본 축의 공간을 나눠 띄엄 띄엄 배치)
- space-between(기본축 방향으로 양 끝을 늘어뜨려 배치)
- space-evenly(빈 공간의 크기가 모두 동일하게 배치)
3) 교차축 방향에서 정렬 (align-items) -> 지금 예시에서 교차축은 위쪽에서 아래쪽
.container {
border: 5px dashed #cacfd9;
width: 500px;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
}크기를 꽉 채워서 배치되던 것이, 요소의 원래 크기로 변하였다.
-> align-items 종류
- center
- flex-end(교차 축 뒤쪽 정렬) = 아래
- flex-front(교차 축 앞쪽 정렬) = 위
- stretch(교차 축에 늘려서 배치) = 위에서 아래로 늘려서.
크기가 고정되어있는 요소는 그 크기 이상 늘어나지 않는다.
4) 기본축과 교차축의 방향 바꿔보기
flex-direction: column; 추가하기 (개발자도구에서도 여백 클릭 후 코드 쓰기도 가능)
align-items: stretch로 바꾸고, green에 height:300px 주기.
5) 추가
기본축으로도 가운데를 배치하고, 교차축으로도 가운데로 배치하려면 (justify-content, align-items) 둘 다 center을 해주면 된다.
🎁 4. 요소가 넘칠 때 (flex-wrap)
1) 기본축의 방향이 row인데 요소가 많아, flex 박스 밖으로 삐져나와 있을 때
solve) 줄바꿈하듯이 배치해주면 된다. 이 코드를 써주면 넘치는 요소는 교차축 방향으로 배치된다.flex-wrap:wrap;
2) 기본축의 방향을 column으로 변경해 보아도 flex-direction: column; 교차축 방향으로 넘어가 배치되는 것을 볼 수 있다.
.container {
border: 5px dashed #cacfd9;
width: 500px;
height: 500px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
🎁 5. 간격 (gap)
1) margin으로 간격을 맞추고 싶을 때 -> 선택자를 활용
사진과 같은 상황에서 여백을 줄 때, green에 직접 margin:0 30px;를 주기. 
🔽
이렇게 직접 margin을 주면 요소 순서가 바뀌거나 요소가 추가되면 margin코드를 수정해야되기 때문이다. 굳이 margin으로 해결하고싶다면, 선택자를 활용하면 된다.
방금 div 태그로 추가한 마지막 박스를 제외한 모든 박스에 오른쪽 마진이 30px만큼 생기지만, 복잡하기 때문에 -> gap을 사용한다.
.box:not(:last-child) {
margin-right: 30px;
}2) gap 일단, 위의 코드는 지우고 container 클래스에 `gap:30px`라고 하면, margin과 같이 여백이 생긴다.
세로와 가로의 방향을 다르게 하여 여백을 넣을 수 있다. 
💨gap의 속성은 기본축, 교차축과 상관없이 flex-direction으로 바꿔봐도 무조건 세로, 가로 순서이다. why? 뒤에 나오는 그리드랑 같이 쓰는 속성이기 때문이다. 즉, 마진쓸 때 순서랑 같다고 외우면 편하다.
🎁 6. 요소 꽉채우기 (flex-grow, flex-shrink, flex-basis)
1) flex-grow : 1; : 요소를 늘려서 빈 공간을 채우고싶을 때 쓴다.
뒤에 있는 1은 상대적은 숫자이다. 기본값은 0이다. 0일땐 늘어나지 않으며 숫자를 써줄 때 숫자에 비례해서 더 많이 늘어난다. 즉, grow값을 blue에게 2를 주었다면 green보다 커질 것이다.
.green {
background-color: #32b9c1;
flex-grow: 1;
}
2) flex-shrink : 요소 크기를 줄여서 꽉 채워보기
값이 클수록 더 많이 줄어든다. 따라서 blue가 제일 작다.
.red {
color: #f9fafc;
flex-grow: 0;
}.green {
color: #f9fafc;
flex-grow: 1;
}.blue {
color: #f9fafc;
flex-grow: 2;
}
3) flex-grow, shrink 특이점
우리가 정한 width나 height의 값으로 크기가 결정되지 않는다. 플렉스박스에서는 요소들의 크기가 늘어나기도, 줄어들기도 하였는데 플렉스박스는 시작 크기와 최종 크기가 있다. 기본축에서 시작 크기를 정해놓으면 플랙스 박스 안에서는 알아서 최종 크기가 결정된다.
다른점도 존재한다. flex-grow는 기본값이 0이고, flex-shrink는 기본값이 1이다.
4) flex-basis
: 플랙스 박스에서 요소의 시작 크기를 flex-basic 속성으로 지정 가능하다. 따로 정해주지 않으면 auto지만, 기본 축의 방향이 가로 방향이면 width를, 세로 방향이면 height를 참고해서 시작 크기를 정한다.
-1. width 속성으로 시작크기 정하는 법
flex-grow: 1;
flex-shrink: 0;
width: 100px;-2. flex-basis 속성으로 시작 크기 지정하는 법
flex-grow: 1;
flex-shrink: 0;
flex-basis: 100px;-3. flex 속성으로 짧게 쓰는 법
flex: 1 0 100px;✅오늘 한 일
코드잇 강의 chapter 2. Flexbox 13까지 완료. 내일부터는 14 실습부터😘
