다른 조에서는 배운 것 같은데, 나는 아니니 혼자 공부해보는 수 밖에!
참고 사이트는 다음과 같다.
1. Naver D2
2. 1분코딩
🔻flex에 대한 진실
- flex와 grid는 함께 언급되는 친구인 것 같다. flex보다 grid를 이용하는 경우가 많고 심지어는 이보다는 float을 아직 많이 사용한다고 한다. 그렇지만 flex의 편리함은 최강이라고 한다.
- flex item은 가로 방향으로 배치되고, 자신의 width만큼만 차지한다. height은 컨테이너의 높이만큼 늘어난다(알아서 늘어난다는 뜻!, of course, height 조정도 가능)
🔻flex 구성
◼ flexbox 만드는 방법
flex 사용의 시작은 flex를 적용하는 것!
- 정렬하고자 하는 요소의 부모요소에 display:flex 속성을 선언 → 그러면 flex container가 되고, 자식들은 flex item이 됨!
.flex_container {
display: flex;
}- inline-flex도 있는데 이건 컨테이너가 주변 요소와 어떻게 어우러질지 결정하는 값! 아무래도 item width만큼 container가 크기가 조정된다는걸까..? 내 추측이다.
◼ item과 container
- flex container: 부모 요소
- flex item: 자식 요소 (복수)
큰 컨테이너 박스 안에 flex item이 배치되어 있다고 보면 된다!
컨테이너의 가로 축은 main axis, 세로 축은 cross axis이다.
부모요소와 자식 요소의 속성이 다르다!
- (부모) flex container 속성: flex-direction, flex-wrap, justify-content, align-items, align-content
- (자식) flex item 속성: flex, flex-grow, flew-shrink, flex-basis, order
◼ flex main axis
- flex-derection 속성으로 주축 방향이 결정되고, 이 방향에 따라 flex item이 정렬된다.
- 속성값으로 row(default) 또는 column이 있다.
🔻flex 속성
◼ flex container 속성
1. flex-direction 배치방향 설정
.container {
flex-direction: row;
}- row: 왼쪽에서부터 층층
- row-reverse: 오른쪽에서부터 층층
- column: 위에서 아래 방향으로 층층
- column-reverse: 아래에서 위로 층층 쌓인다!
2. flex-wrap 줄넘김 처리 설정
컨테이너에 여유 공간이 없을 때, 아이템 줄바꿈을 어떻게 할 지 결정하는 속성
.container {
flex-wrap: nowrap;
}- nowrap: 기본값, 여유 없는거 무시하고 밖으로 삐져나감
- wrap: item이 아랫줄로 이동
- wrap-reverse: item이 윗줄로 이동
3. flex-flow : direction과 wrap을 한번에 지정
.container {
flex-flow: row wrap;
}4. justify-content
여기서 justify란 메인 축을 따라 정렬(이동)하는 것!
반대로 메인 축의 수직으로 정렬(이동)하는 것은 align이다.
.container {
justify-content: flex-start;- flex-start: 기본값, 아이템을 시작점으로 정렬
- flex-direction이 row이면 왼쪽, column이면 위
- flex-end: 아이템을 끝점으로 정렬
- flex-direction이 row이면 오른쪽, column이면 아래
- center: 아이템을 가운데로 정렬
- space-between: 아이템들의 사이에 균일한 간격을 생성
- space-around: 아이템들의 둘레에 균일한 간격 생성
- space-evenly: 아이템 사이와 양 끝에 균일한 간격 생성
- IE와 Edge는 지원되지 않음!
5. align-items
.container {
align-items: stretch;
}- stretch: 아이템들이 수직축 방향으로 끝까지 늘어남
- flex-start: 아이템들을 시작점으로 정렬
- flex-direction이 row면 위, column이면 왼쪽
- flex-end: 아이템을 끝으로 정렬
- flex-direction이 row면 아래, column이면 오른쪽
- center: 아이템을 가운데로 정렬
- baseline: 아이템을 텍스트 베이스라인 기준으로 정렬
6. align-content 여러 행 정렬
- flex-wrap이 wrap 으로 설정된 상태에서, 아이템 행이 2줄 이상 되었을 때 수직축 방향 정렬을 결정
.container {
flex-wrap: wrap;
align-content: stretch;
}- stretch : 아이템들이 수직축 방향으로 늘어남
- flex-start: 아이템을 시작점으로 정렬 (내용물만큼만 height 설정)
- flex-end: 아이템을 끝점으로 정렬 (row인 경우 아래)
- center: 가운데정렬
- space-between : 두 줄로 내려갔을 때 사이 너비 동일하게
- space-around : 각 줄의 around 너비가 동일
- space-evenly : 밖과 안이 너비 동일 (MS 계열 브라우저에서 실행x)
◼ flex item 속성
1. flex-basis 아이템 기본 크기 설정
flex-direction이 row면 너비, column이면 높이
- flex-basis: 100px 하면 100px 넘는 아이템은 그대로 넘는 수준에서 유지됨
- width 쓰면 100px보다 큰 아이템도 100px로 맞춰짐
2. flex-grow
Hello!