한 요소가 보통 흐름으로부터 빠져 텍스트 및 인라인 요소가 그 주위를 감싸 해당 요소에 좌우측에 배치 되게 하는 것
left
: 왼쪽으로right
: 오른쪽으로none
: 기본값clear
: float 해제⚠️ 자식 요소들이 모두 float 속성을 가지게되면, 컨테이너 요소의 높이에 자식 요소들의 높이가 포함되지 않는 것에 주의
< 해결 방법 >
1. 부모에게 높이 값 지정
2. overflow:hidden
사용
3. clear-fix
.container::after{
content:'';
display:block;
clear:left;
}
자식 요소들이 컨테이너 안 공간을 맞추기 위해서 크기를 키우거나 줄이는 방법을 설정하는 방법
주로 1차원적 레이아웃을 위해 주로 사용
컨테이너 내 아이템을 배치할 때 주축 및 방향 지정
row
(기본값) : 왼쪽에서 오른쪽 (행)column
: 위에서 아래 (열)row-reverse
: 오른쪽에서 왼쪽column-reverse
: 아래쪽에서 위쪽주축을 기준으로 배열의 위치를 조절하거나 아이템 간 설정
flex-start
: 시작점 정렬flex-end
: 끝점 정렬center
: 가운데 정렬space-between
: 아이템들 사이에 균일한 간격 space-around
: 아이템 둘레에 균일한 간격space-evenly
: 아이템 사이와 양 끝에 균일한 간격수직축을 기준으로 배열의 위치를 조절하거나 아이템 간 설정
stretch
(기본값) : 수직축 방향으로 끝까지 늘어남 flex-start
: 시작점 정렬flex-end
: 끝점 정렬center
: 가운데 정렬baseline
: 베이스라인 기준으로 정렬
flex-wrap: wrap;
이 설정된 상태에서 아이템들의 행이 2줄 이상 되었을 때의 수직축 방향을 결정하는 속성
컨테이너가 더 이상 아이템들을 한 줄에 담을 여유 공간이 없을 때 아이템 줄바꿈을 어떻게 할지 결정하는 속성
nowrap
(기본값) : 줄바꿈을 하지않고 넘치면 그냥 삐져나옴wrap
: 줄바꿈 함wrap-reverse
: 줄바꿈 하지만 역순 배치flex-direction과 flex-wrap을 한번에 지정할 수 있는 단축 속성
아이템 사이의 간격 설정할 때 사용
flex-item의 초기 크기 설정
row일 경우 width값, column일 경우 height
아이템이 컨테이너 내부에서 할당할 수 있는 공간의 정도 지정
flex-grow에 들어가는 숫자 -> flex-basis를 제외한 여백 부분을 flex-grow에 지정된 숫자의 비율로 나누어 가짐
/* 예시로 1:2:1의 비율로 세팅할 경우 */
.item:nth-child(1) { flex-grow: 1; }
.item:nth-child(2) { flex-grow: 2; }
.item:nth-child(3) { flex-grow: 1; }
아이템의 크기를 고정하거나 축소할 때 사용
값으로0
사용시 줄어들지 않음
부모의 align-items 속성을 덮어 flex-item에게 개별적인 align-items 속성을 부여합니다.
아이템들의 순서를 수의 크기로 결정
수가 작을수록 더 높은 우선순위를 받음
음수도 사용 가능
flex: [flex-grow] [flex-shrink] [flex-basis];
자식 요소들이 컨테이너 안 공간을 맞추기 위해 크기를 키우거나 줄이는 방법을 설정
웹페이지를 위한 2차원 레이아웃 시스템
열방향 그리드 트랙의 사이즈 설정
행방향 그리드 트랙의 사이즈 설정
💡 새로운 단위 fr
grid 컨테이너 안에서 트랙의 비율을 지정해주는 유연한 길이 단위
ex ) 1fr 1fr 1fr -> 1:1:1
.container {
display: grid;
width: 300px;
height: 300px;
/* grid-template-columns: 1fr 1fr 1fr; */
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 2fr 1fr;
}
repeat 함수 사용시, 개수를 미리 정하지 않고 설정된 너비가 허용하는 한 최대한 셀을 채움
auto-fill
: 채우고 남은 빈공간 남김auto-fit
: 채우고 남은 빈공간을 각 셀들이 나눠 가짐그리드 콘텐츠의 수직 정렬
그리드 콘텐츠의 세로 높이가 그리드 컨테이너보다 작아야함
stretch
, center
, start
, end
, space-around
, space-between
, space-evenly
그리드 콘텐츠의 수평 정렬
그리드 콘텐츠의 가로 너비가 그리드 컨테이너보다 작아야함
stretch
, center
, start
, end
, space-around
, space-between
, space-evenly
직계 자식에 대한 수직 정렬 모두 동일하게 적용
stretch
, center
, start
, end
직계 자식에 대한 수평 정렬 모두 동일하게 적용
stretch
, center
, start
, end
grid-area : [gird-row-start] / [gird-column-start] / [gird-row-end] / [gird-column-end];
💡 span
행과 열을 병합할 때 사용
ex ) 1fr 1fr 1fr -> 1:1:1
grid-row-start: 1; /* 1 */
grid-row-end: 2; /* 3 */
grid-column-start: 1; /* 2 */
grid-column-end: 4; /* 4 */
grid-row: 1/2;
grid-column: 1/4;
grid-area: 1/1/2/4;
grid-area: 1/1/1/span 3;
position 속성을 사용하지 않아도 화면에 보여지는 우선순위 설정 가능
아이템 개별로 수직 정렬
stretch
, center
, start
, end
아이템 개별로 수평 정렬
stretch
, center
, start
, end
palce-self : [align-self] [justify-self];
출처: WENIV, 1분코딩
참고 글 : https://studiomeal.com/archives/197, https://studiomeal.com/archives/533