우아한테크)콜린의 flex layout

https://www.youtube.com/watch?v=JQ0jO3B43YQ 

 

[layout:문서위에 상자를 배치하는 방법]

1. block요소
부모요소 너비를 전부 차지한다
2. inline요소
부모너비의 전부를 차지하지 않고 컨텐츠 영역만 차지

 

[flex]

요소들을 행, 열단위로 정렬하기 위한 1차원 레이아웃
부모요소에 display: flex;


[flex 용어]
1. flex container
: flex아이템들의 배치나 정렬을 담당-수평, 수직정렬등을 가능하게 해줌
2. flex item
:  flexcontainer의 자식요소
: 자기가 차지하는 크기 및 자신들 사이의 순서를 변경할 수 있다.

3. main axis: 주축 정렬에 대한 기준 main-start-> main-end
4. cross axis: 부차적 정렬에 대한 기준


[flex 속성]
1. flex container에 적용하는 속성
flex-direction: main-axis의 방향을 결정하여 main-start 기준점을 잡는 속성
flex-direction: row-> main축이 row 방향으로 설정되어 아이템들이 나열됨
flex-direction: column -> main축이 column 방향으로 설정되어 아이템들이 나열됨
-reverse가 붙으면 main시작점이 반대방향에서 시작함
2. flex-wrap 
flex item들이 컨테이너 영역을 넘었을때 (overflow)했을 때, item을 어떻게 배치할 것인가

 

-기본속성
.container{
 display: flex;
->flex-wrap: nowrap; default; -> overflow되더라도 한개의 라인만 유지한다

->flex-wrap: wrap; -> overflow된다면 flexitem이 새로운 줄에 배치된다
}

3. justify-content(정렬)
main축을 기준으로 flex item을 정렬하는 기능
.container{
display: flex;
->justify-content: center; -> item들이 main축을 기준으로 중앙정렬

->justify-content:space-between -> 각 item들사이에 동일한 공간을 유지시킨다

4. align-item
cross축을 기준으로 item을 정렬하는 역할
.container{
display: flex;
-align-items: stretch; default :item들이 부모의 높이를 전부차지

-align-items:  center; item들이 center를 기준으로 중앙정렬

-> 수평, 수직 중앙 정렬

.container{-> 부모에서 모든 역할 담당
display: flex;
justify-content: center;
align-items: center;
}


[flex_item 속성값]
1. order[순서]
: main-axis를 기준으로 flex-item의 시각적 순서를 변경하는 속성 default=0;
.item9{
order:-1-> -1보다 작은 숫자가 없다면맨앞에 위치하게 됨
}

2. 크기조절
: flex-item의 크기를 조절하는 속성
flex-grow, flex-shrink, flex-basis, flex
-flex-basis: flex-item의 기본크기를 설정 default: auto(컨텐츠를 차지하는 영역)

-flex-grow: flex-item이 늘어날 비율을 결정하는 속성 (container의 빈 영역을 flex-grow 비율에 맞춰 분배)
-felx-shrink: flex-item이 줄어드는 비율을 결정하는 속성-flex-item이 컨테이너 영역을 overflow했을 때
-flex: 위 세 속성의 축양형 속성
ex) flex: 1 1 auto, flex 2 0 100px

기타속성: 여백[gap]
flex-item 사이의 간격을 설정하는 속성