22.10.25 CSS Flexbox 개구리
샌드박스 실시간으로 코드 웹에서 볼 수 있는
https://codesandbox.io/s/html-cssgico-rur0eq
CSS - Flexbox 핵심개념
부모 자식 요소 관계 성립 전제한다.
1. Flexbox 는 우리 수준에서는 항상 부모요소에게 말을 건다(코드 입력). 자식 요소에게 말걸지 않아.
부모요소로 자식요소 조종 가능.
2. 축 개념이 중요. 가로(MAIN AXIS-justify content가 이에 따라가) 세로(CROSS AXIS-align items가 이에 따라가) 기준으로 부모에게 말을 걸어. 원하는 방식으로 정렬.
이 축 개념은 고정적이지 않아. 경우에 따라 변화 가능.
vh view height 전체화면 단위
부모 요소에 적용해야하는 Flexbox 속성들
정렬
display: flex; : 속성 적용하면 세로 정렬되어 있는 자식 요소들이 가로로 정렬됨.
flexbox 사용하려면 disply: flex; 으로 시작?
1.flex-direction : row : 자식 요소들을 정렬할 정렬 축을 정해줌. ex) row(기본값 가로방향), column, -reverse(오른쪽부터, 아래부터)
2.flex-wrap : nowrap : 하위 요소들 크기가 상위 요소의 크기 넘으면 자동 줄 바꿈을 할 것인지 정함. ex)nowrap, wrap/(가로로 줄바꿈간다), -reverse
+flex-flow는 위에거 두개 합친거. flex-flow: direction wrap; 나열.
3. justify-content : 자식 요소들을 축의 수평 방향으로 어덯게 정렬할 것인지 정함.
축의 수평 방향이라 함은 정렬 축 진행 방향 이야기 ex) row(기본), column
ex) flex-start, flex-end, center, space-between, space-around
flex-direction : row 상태에서 ex 왼쪽에 붙어서 왼쪽부터 가로로, 오른쪽에 붙어서 왼쪽부터 가로로
flex-direction : column 상태에서 ex 위에 붙어서 위쪽부터 세로로, 아래에 붙어서 위쪽부터 세로로
4. align-items : 축의 수직 방향으로 어떻게 정렬.
축의 수직 방향이라 함은 정렬 축 방향의 수직 방향.
ex) stretch, flex-start, flex-end, center, baseline(글씨의 밑변 기준 flex start와 구성은 비슷)
flex-direction : row 상태에서 ex (진행방향은 가로)세로로 스트레치, 위에 붙어서, 아래에 붙어서, 세로의 가운데,
flex-direction : column 상태서 ex (진행방향은 세로)가로로 스트레치, 왼쪽 붙어서, 오른쪽 붙어서, 가로의 가운데,
+align-self 로 지정된 align-items 값 무시하고 정렬 가능.
+align-content 는 여러 줄들 사이 간격을 지정
자식 요소에 적용해야하는 Flexbox 속성
flex 요소가 차지하는 공간
flex 속성 값 표현 flex: grow shrink basis
기본값은 flex: 0 1 auto;
flex-grow(팽창 지수) flex-shrink(수축 지수) flex-basis(기본 크기) 이렇게 따로 값 지정도 가능.
grow(팽창 지수)는 정렬축 방향으로 빈 공간이 있을 경우, 각 자식 요소들이 얼마나 늘어나서 남는 공간을 차지할 것인지 비율 정해줘. box 1,2,3이 있다고 하면 팽창지수 총합에서의 비율로 빈 공간 차지. 여백의 비
1:0:0 이면 본래 0:0:0이었을 경우의 남는 공간을 box1이 다차지 하는 것
1:1:0 이면 남는 공간을 box1과 box2가 1:1로 나눠가지고
1:1:1 이면 남는 공간을 box 1,2,3이 1:1:1로 나눠 가지는 것
shrink(수축 지수) 비율이 클수록 박스 크기 더 많이 줄어. width나 flex-basis 속성에 따른 비율이라 실제 크기 예측 어려움
grow 속성과 함께 사용하는 건 비추. 비율로 레이아웃 지정하려면 shrink보다 grow속성 변화 권장.
0 이상의 값이 세팅되면 basis보다 작아져
basis(기본 크기) grow나 shrink 에 의해 늘거나 줄기 전에 가지는 기본 크기. grow 0일때만 basis 크기 지정하면 그 크기 유지.
auto 는 해당 item의 width값. width값이 안 정해져 있다면 content 크기
basis를 0으로 하면 여백의 비가 아니라 역역 자체를 원하는 비율로 분할 가능.
+
width보다 basis가 우선된다.
콘텐츠가 많아 자식 박스 넘치면 width가 정확한 크기 보장 못해
basis 사용 않는다면 위 경우 대비해서 max-width 사용 가능
order의 속성을 각 요소에 적용 가능
order: integar; (작은 숫자일 수록 먼저 배치. 시각적 순서일 뿐 html의 구조를 바꿔주지 않는다.-는 이해가 안된다)