CSS 요소의 배치 방식
display
- 요소가 표시될 방식을 지정
- 값
block : 해당 요소를 포함하고 있는 부모 요소의 줄 전체를 차지하는 플로우 컨텐츠. <div>, <section>, <header> 태그 등이 이에 속한다.
inline : 텍스트의 흐름에 포함되는 구문 컨텐츠. <a>, <b>, <span>등이 이에 속한다. 단, display 속성 값이 inline인 태그는 크기 설정(width, height)이 불가능
inline-block : inline의 속성을 가지는 구문 컨텐츠면서 크기 설정 등이 가능하도록 일부 block의 속성도 가지는 속성값
none : 요소 표시 X. 크기 또한 X, 자리 차지도 아예 안함
flex : 해당 요소를 플로우 컨텐츠형 플렉스 컨테이너로 표시
inline-flex : 해당 요소를 구문 컨텐츠형 플렉스 컨테이너로 표시
grid : 해당 요소를 플로우 컨텐츠형 그리드 컨테이너로 표시
inline-grid : 해당 요소를 구문 컨텐츠형 그리드 컨테이너로 표시
flex
- 이가 가지는 자식 요소들에 대한 배치를 보다 유연하고 쉽게함
- 플렉스 컨테이너가 될 요소의 display값을 flex혹은 inline-flex로 설정
플렉스 컨테이너(부모)
align-items
- 플렉스 컨테이너의 flex-direction에 대해 수직한 방향으로의 정렬을 위한 속성, flex-direction값에 따라 세로, 가로가 정해짐
- 값
flex-start : 흐름 방향에서 시작하도록 정렬
flex-end : 흐름 끝 방향에서 시작하도록 정렬
center : 가운데 정렬
space-between : 각 플렉스 아이템의 사이에 균등한 공간을 배분한다.
space-around : 각 플렉스 아이템의 사이에 균등한 공간을 배분하고, 각 끝 아이템의 외부 여백 또한 배분하는데, 외부 여백은 각 플렉스 아이템 사이 여백의 절반
space-evenly : 각 플렉스 아이템의 사이및 각 끝에 균등한 공간을 배분
stretch : 플렉스 컨테이너의 크기에 맞게 늘이거나 줄임 요소를
flex-direction
- 플렉스 컨테이너에 부여하는 속성, 이가 포함하고 있는 아이템들의 흐름 방향을 지정
- 값
row : [기본값] 가로방향
row-reverse : 가로 역방향. 요소의 순서도 함께 반전됨
column : 세로방향
column-reverse : 세로 역방향. 요소의 순서도 함께 반전됨
gap
- 플렉스 컨테이너가 포함하는 아이템간의 거리 지정
- 형태
[값1] : 값1이 크기값일 때, 행간, 열간 거리를 모두 값1로 지정
[값1 값2] : 값1과 값2가 크기값일 때, 행간거리를 값1, 열간거리를 값2로 지정
justify-content
- 플렉스 컨테이너의 flex-direction에 대해 수평한 방향으로의 정렬을 위한 속성, flex-direction값에 따라 세로, 가로가 정해짐
- 값
flex-start : 흐름 방향에서 시작하도록 정렬
flex-end : 흐름 끝 방향에서 시작하도록 정렬
center : 가운데 정렬
space-between : 각 플렉스 아이템의 사이에 균등한 공간을 배분한다.
space-around : 각 플렉스 아이템의 사이에 균등한 공간을 배분하고, 각 끝 아이템의 외부 여백 또한 배분하는데, 외부 여백은 각 플렉스 아이템 사이 여백의 절반
space- evenly : 각 플렉스 아이템의 사이및 각 끝에 균등한 공간을 배분
플렉스 아이템(자식)
flex
- flex-basis, flex-grow, flex-shrink 세 가지 속성의 축약 속성
- 형태
[flex-basis 값] [flex-shrink 값], [flex-grow값]
*{
flex: 0 0 auto;
}
위 속성은 아래와 같다.
*{
flex-basis:auto;
flex-grow:0;
flex-shrink:0;
}
flex-basis
- 플렉스 아이템의 초기 크기 지정
- 플렉스 컨테이너의 flex-direction 속성 값이 row일때 이는 width와 동일, column일때 height와 동일
- 값
auto : [기본값] 요소가 가지는 내용에 따라 자동 조절
크기 값
flex-grow
- 플렉스 아이템이 플렉스 컨테이너 안에서 flex-direction 방향에 따라 남는 여유공간을 차지하기 위해 늘어날 비율
- 값
0이상의 정수 : 기본값은 0
flex-shrink
- 플렉스 아이템이 플렉스 컨테이너 안에서 flex-direction 방향에 따라 줄어들 비율을 지정. 단, 이가 가진 내용을 표시하기 위한 최소한의 크기 미만으로 줄지 않음
- 값
0이상의 정수 : 기본값은 1
grid
이가 가지는 자식요소들에 대한 반복되는 격자배치를 보다 쉽게 함
그리드 컨테이너가 될 요소의 display속성 값을 grid 혹은 inline-grid로 설정
그리드 컨테이너(부모)
grid-template-columns
- 그리드 컨테이너에 부여하는 속성, 그리드 열의 구조를 설정
- 값
크기 값
fr 값
- 형태
[값 ...]
grid-template-rows
- 그리드 컨테이너에 부여하는 속성, 그리드 행의 구조를 설정
- 값
크기 값
fr 값
- 형태
[값 ...]
gap
- 그리드 컨테이너가 포함하는 아이템간의 거리를 지정
- 형태
[값1] : 값1이 크기 값일 떄, 행간, 열간 거리를 값1로 지정
[값1 값2] : 값1, 값2가 크기 값일 때, 행간 거리를 값1, 열간 거리를 값2로 설정
그리드 아이템(자식)
grid-column
- 해당 아이템이 차지해야하는 열의 번호 지정
- 형태
[시작 번호] / [끝 번호]
슬래쉬(/)의 좌우에는 반드시 공백이 있어야 함에 유의한다
grid-row
- 해당 아이템이 차지해야하는 행의 번호 지정
- 형태
[시작 번호] / [끝 번호]
슬래쉬(/)의 좌우에는 반드시 공백이 있어야 함에 유의한다.
order
- 해당 아이템의 태그 순번과 관계 없이, 시각적으로 배치되어야 하는 순서를 지정
- 단, grid-column, grid-row 속성이 적용되어 있다면 order 속성은 무시된다.
- 속성 값이 같은 아이템끼리는 태그의 배치 순서에 따라 표시
- 값
[정수] : 숫자가 작을수록 우선 배치된다. 기본값은 0
아래는 flex의 사용 예시이다.
이 코드를 실행하면 다음과 같다
다음은 grid의 사용 예시이다.
이를 실행하면
이런 결과가 나온다.