22-09-15(2)-TIL

Flex

display 속성
내부 자식 박스들 배치에 영향을 줌

1차원 배열 : flex 먼저 고려하기 (한 줄)
2차원 배열 : grid 먼저 고려하기 (두 줄 이상)

외부 디스플레이 타입 (inline, block, inline-block) : 부모와 형제간의 박스 배치
내부 디스플레이 타입 (grid, flex..) : 내부 자식들의 박스 배치

display:flex;
display:inline-flex;
Block 레벨 요소 성질 을 가짐
부모(Flex-container) 속성에 의해 자식(Flex-item)을 컨트롤

flex-container

주축을 가지며 기본 방향 왼 -> 오
주축이 시작하는 시작점 : flex-start
중간점 : flex-center
끝나는점 : flex-end

flex-direction

flex-container (부모) 가 사용할 주축과 정렬 방향을 결정

row : 주축을 행 방향 ->

.container {
	display:flex;
    flex-direction: row;
}

row-reverse : 주축을 행 방향 & 축의 시작점을 역전
(왼쪽 정렬에서 오른쪽으로 정렬 느낌)

.container {
	display:flex;
    flex-direction: row-reverse;
}

column : 주축 방향을 열 방향 ⬇️

.container {
	display:flex;
    flex-direction: column;
}

column-reverse : 주축 방향을 열 방향 ⬇️ & 축의 시작점 역전

.container {
	display:flex;
    flex-direction: column-reverse;
}

justify-content

주축 기준

주축을 기준으로 배열 위치 조정 / 아이템 간격 설정

.container {
	justify-content: flex-start;
    justify-content: flex-end;
    justify-content: center;
    /*양 끝에 요소들 존재*/
    justify-content: space-between;
    /*양 끝에 요소들 존재 & 왼, 오 간격 존재 */
    justify-content: space-around;
}

Axis & Cross-Axis

axis 는 row & cross-axis 는 column
axis 가 column & cross-axis는 row

align-items, align-content

align-items 교차축 정렬

align-items : cross-axis 기준으로 이동 (교차축의 정렬)
align-content : flex-container의 cross-axis축 아이템들이 여러 줄일때 사용 가능 (두 줄의 flex-wrap: wrap 인 상태에서)

.container {
	align-items: stretch; (기본값)
    align-items: center;
    align-items: flex-start;
    align-items: flex-end;
    /* 텍스트의 베이스라인에 맞춰서 아이템 정렬 */
    align-items: baseline; 
}

flex-wrap

자식요소를 감싸 부모 넓이에 따라 자식들 줄바꿈하는

.container {
	display:flex;
    flex-direction: column;
    flex-wrap: wrap;
}

flex-flow

flex-direction: column; 와 flex-wrap: wrap; 주로 같이 사용하므로 flex-flow 속성을 통해 단축 사용

.container {
	display:flex;
    flex-flow: wrap column;
}