Flexbox
- 요소들을 유연하게 정렬하고 배치하기 위한 CSS 레이아웃 모델로, 가로 또는 세로 축을 기준으로 정렬할 수 있다.
📍 Flexbox 사용 방법
1. display: flex
- 정렬할 요소들을 포함한 부모요소에
flex선언하기 - 종류 :
flex(기본값),inline-flex - 부모 요소가
inline요소일 경우엔inline-flex선언하기
2. flex-direction
- 가로, 세로 중 어느 방향으로 정렬할지 정하기
- 종류 :
row(기본값, 좌->우),row-reverse(우->좌),column(상->하),column-reverse(하->상) flex-direction방향으로Main axis, 그와 수직인 방향으로Cross axis과 같은 두 개의 축이 생성된다.
 |  |
|---|
✔️ flex-direction 이 row 일 경우에는 가로로 정렬되고, Main axis는 가로축, Cross axis는 세로축이 된다.
3. flex-wrap
- 요소들을 한 줄로 정렬할지, 여러 줄로 정렬할지 정하기
- 종류 :
nowrap(기본값),wrap nowrap으로 지정하면 자식 요소들의 사이즈를 줄여서라도 한 줄로 정렬하고,wrap으로 지정하면 한 줄로 정렬할 공간이 없으면 여러 줄로 만들어서 정렬한다.
 |  |
|---|---|
flex-wrap: nowrap | flex-wrap: wrap |
4. flexbox 정렬하기
📍 justify-content
- 종류 :
flex-start,flex-end,center,space-between,space-around Main axis를 기준으로 요소들을 정렬한다.
▪️space-between: 첫 번째 요소와 마지막 요소는 컨테이너의 좌우 측면에 정렬되고, 요소들 사이의 간격은 동일하다.
▪️space-around는 첫 번째 요소와 마지막 요소가 컨테이너의 양쪽 끝과 같은 간격을 가지고, 아이템 사이의 간격은 동일하다.
📍 align-items
- 종류 :
flex-start,flex-end,center
📍 align-content
- 종류 :
flex-start,flex-end,center,space-between,space-around cross axis를 기준으로 요소들을 정렬한다.
✔️ align-items, align-content의 차이점 : align-items는 개별 아이템들을 정렬하는 데 사용되고, align-content는 여러 줄에 대한 정렬을 다루는 데 사용된다.
📍 Order
- flex 아이템 요소들의 배치 순서를 지정하는 속성이다. 기본적으로 요소들은 html 마크업 순서대로 배치되는데, order 속서를 사용하면 요소들의 순서를 변경할 수 있다. 숫자가 낮을수록 앞에 배치되고, 숫자가 높을수록 뒤에 배치된다.
📍 flex-shrink
- flex 아이템 요소들의 축소 비율을 지정하는 데 사용된다. 양수의 숫자 값을 가지고, 기본값은 1이다. 그리고 숫자가 클수록 아이템이 더 많이 축소된다.
위 사진을 보면 아이템 2에 flex-shrink: 2를 지정하여flex-shrink기본값 1인 다른 아이템들에 비해 두 배로 많이 축소된 것을 확인할 수 있다.
📍 관련 실습
프로필 카드
- 프로필 카드에
flex적용해 안의 요소들(이미지, 텍스트 등) 세로로 정렬하기
.profile{
display: flex;
flex-direction: column;
align-items: center;
width: 368px;
} - 카드의 detail 부분 (친구, 프로젝트, 리뷰)
flex사용해 가로로 정렬하기
.profile-detail{
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
text-align: center;
}flex를 사용해 화면 정중앙에 배치하기 (부모인<body>에flex적용하기)
body{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
}참고 사이트
