💎 사전 info no.1 : 100%와 100vh의 차이
100%는 부모의 높이를 100 채운다는 말이고, 100vh는 부모와 상관없이 보이는 viewpoint의 100을 의미한다
💎 사전 info no.2 : 주축(Main Axis)과 교차축(Cross Axis)
주축은 flex-direction 속성을 사용하여 지정하며 교차축은 이에 수직인 축으로 결정된다.
💎 Flex 속성
Flex 속성은 HTML element를 block level flex container로 만들며, 그 element의 부모 전체너비를 받을 수 있게 설정된다. flex container의 모든 하위 자식 element는 flex item이라 부른다. flex-item은 상위 container의 크기와 위치에 따라 크기와 위치를 변경한다.
display: flex말그대로 flex를 선언하는 코드다. 이 값이 지정된 container의 direct children 요소가 flex 항목이 된다.
💎 Container 속성
Container 속성:
flex-direction:
- Items의 주축 방향을 수직 또는 수평으로 설정함
- flex item이 순서에 따라 배치되는지 또는 역순으로 배치되는지 결정함
flex-wrap:
- flex item이 wrap되어야 하는지 결정하며 flex item에만 적용되는 속성
- container 크기를 줄일 때 flex item을 처리하는 방법을 결정함
- nowrap은 flex item을 한 줄에 표시하며 기본 설정값
- window의 크기가 줄어도 flex item의 크기가 줄어들며 줄바꿈이 일어나지 않음
- 반대로 wrap은 window의 크기가 줄어도 여러 줄로 줄바꿈이 가능하며 flex item의 크기가 유지됨
flex-flow을 이용해서 한번에flex-direction,flex-wrap선언 가능하다.
ex)flex-flow: column no-wrap;
justify-content:
Main-axis의 정렬 방법을 결정한다.
- flex-start : Items 시작점에서 정렬 - 기본 설정값
- flex-end : Items 끝점에서 정렬
- center : Items 가운에 정렬
- space-between : 첫번째 item은 시작점에 마지막 item은 끝점, 그리고 나머지 item은 사이에 고르게 정렬
- space-around : Items를 일정한 여백에 정렬
** Items의 순서는 바뀌지 않는다 ( ≠ flex-direction)
align-items:
Cross-axis에서 items의 정렬 방법을 결정한다. Items가 flex-wrap을 이용해 여러 줄일 경우 align-content 속성을 기본값으로 선언해야지 사용할 수 있다.
- stretch : 교차축에 items를 채우기 위해 늘린다
- flex-start : items의 각줄 시작점에 정렬
- flex-end : items의 각줄 끝점에 정렬
- center : items 가운데로 정렬
- baseline : items 문자 기준선으로 정렬
💎 Item 속성
order:
- Item의 순서를 결정
flex-grow:
- container 사이즈에 따른 item의 증가 너비 비율
- 숫자가 더 크면 더 많은 너비를 가져감
- Item이 가변크기 또는 0일 경우 속성 적용 안됨
flex-shrink:
- container 사이즈에 따른 item의 감소 너비 비율
- 숫자가 더 크면 더 많은 너비가 감소됨
flex-grow와 똑같이 item이 가변크기 혹은 0일 경우 속성 적용 안됨
flex-basis:
- Item이 container 안을 얼마나 차지하는지 세부적으로 명시하는 속성
flex으로flex-grow,flex-shrink,flex-basis을 한 줄로 표현 가능
ex)flex: 2 1 150px;
align-self:
- 일부 item을 따로 정렬하는 속성
- auto(기본값,
align-item속성을 이어받음), baseline, center, flex-end, flex-start, stretch 값을 설정할 수 있음
Reference
https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Flexbox%EC%9D%98_%EA%B8%B0%EB%B3%B8_%EA%B0%9C%EB%85%90
https://www.codecademy.com/learn/advanced-css-flexbox-and-animations/modules/layout-with-flexbox/cheatsheet
https://www.youtube.com/watch?v=7neASrWEFEM
https://heropy.blog/2018/11/24/css-flexible-box/
