▶ flex-container에 사용하는 속성
▷ display: flex;
- 자식 요소들이 컨테이너 안 공간을 맞추기 위해 크기를 키우거나 줄이는 방법을 설정한다.
- 부모 요소(flex-container), 자식 요소(flex-item)
- 주로 1차원적 레이아웃을 위해 사용한다.
▷ flex-direction
가로-세로 X. 주축(justify-content)-교차축(align-items)으로 이해하기.
- row: 기본값. 왼쪽에서 오른쪽 (주축이 행 방향)
- column: 위에서 아래 방향 (주축이 열 방향)
- row-reverse: 오른쪽에서 왼쪽 방향
- column-reverse: 아래에서 위 방향
▷ justify-content
주축을 기준으로 아이템의 간격, 위치를 조정.
- flex-start: 왼쪽에 붙는다.
- flex-end: 오른쪽에 붙는다.
- center: 중앙 정렬.
- space-between: 간격 동일하게, 양 옆에 붙는다.
- space-around: 간격 동일하게, 양 옆을 조금 남긴다.
- space-evenly: 양 옆까지 모든 간격이 동일하다.
▷ align-items, align-content
- align-items: 교차 축을 기준으로 정렬한다.
- align-content: 컨테이너의 교차 축 아이템이 여러 줄일때 사용 가능.
→ flex-wrap:wrap 인 상태에서 사용해야 한다.
▷ flex-wrap
- 한 줄에 배치되게 할 것인지, 가능한 영역 내에서 여러 행으로 나누어 표현할 것인지 결정한다.
- wrap: 줄 바꿈 O.
- nowrap: 줄 바꿈 X. 한 줄로 표시.
- wrap-reverse: 줄 바꿈 O. 순서가 역방향이 됨.
▷ flex-flow
flex-direction와 flex-wrap의 단축속성
- flex-flow: row wrap;
▶ flex-item에 사용하는 속성
▷ flex-basis
- flex-item의 초기 크기를 설정한다.
- width, height와 다른 점 : 축의 방향에 따라 달라지고, 내부 콘텐츠에 따라 유연한 크기를 가진다.
- 해당 속성이 적용되어있다면 주축에 따라 width나 height 값이 무시된다
▷ flex-grow
- 컨테이너 내부에서의 아이템 팽창 비율을 설정한다.
- 형제 요소인 아이템이 모두 같은 flex-grow 값을 가지면, 내부에서 동일한 공간을 할당받는다.
- 값을 0으로 주면 늘어나지 않는다.
▷ flex-shrink
- 컨테이너 내부에서의 아이템 축소 비율을 설정한다.
- 값을 0으로 주면 줄어들지 않는다.
▷ align-self
- 특정 아이템의 정렬을 따로 정하고 싶을 때 사용한다.
▷ order
- 아이템마다 'order: 값'을 주고 수의 크기로 순서를 결정한다.
- 음수도 사용 가능하다.
▶ flex 단축속성
flex-grow, flex-shrink, flex-basis
flex: 1 1 100px;▶ Grid
▷ display:grid
- 자식 요소가 컨테이너 안 공간을 맞추기 위해서 크기를 키우거나 줄이는 방법을 설정하는 것.
- 부모요소(grid-container), 자식요소(grid-item)
- 웹페이지를 위한 2차원 레이아웃 시스템.
▶ grid-container에 사용하는 속성
▷ grid-template-columns : 열방향 그리드 트랙 사이즈 설정.
▷ grid-template-rows: 행방향 그리드 트랙 사이즈 설정.
▷ fr(fraction) 단위
: grid 컨테이너 안에서 트랙 비율을 지정하는 유연한 길이 단위.
: 1fr 1fr 1fr은 1:1:1의 비율을 의미한다.
▶ 함수
▷ repeat()
- grid-track의 사이즈를 간단하게 표현하도록 도와주는 CSS 함수.
- 함수에 전달하는 첫번째 인자: 반복 횟수
- 함수에 전달하는 두번째 인자: 반복할 값
/* grid-template-columns: 1fr 1fr 1fr; */
grid-template-columns: repeat(3, 1fr);
/* grid-template-columns: 1fr 2fr 1fr 2fr; */
grid-template-columns: repeat(2, 1fr 2fr);▷ minmax()
- 그리드에서 최소와 최대 사이의 범위를 설정해 유연하게 처리한다.
grid-template-rows: repeat(2, minmax(20px, auto));
grid-template-columns: minmax(30px, auto) repeat(3, 1fr);▷ auto-fill & auto-fit
- repeat 함수를 사용하면서 반복되는 카운트를 고정하지 않고, 컨테이너 넓이에 따라 가능한 많은 그리드 컬럼을 배치하고 싶을 때 사용하는 키워드 값.
- auto-fill: 가능한 많은 셀을 생성. 빈공간이 생긴다.
- auto-fit: 그리드 컨테이너 내부에 공간이 남으면 각 셀이 나눠 갖는다.
.autofill{
grid-template-columns: repeat(auto-fill, minmax(100px, auto));
}
.autofit{
grid-template-columns: repeat(auto-fit, minmax(100px, auto));
}▷ gap
- 셀과 셀사이의 간격을 설정. 복잡한 레이아웃 안에서 마진 대신 편리하게 사용할 수 있다.
- 익스플로러에서는 지원하지 않는다.
▶ grid-item에 사용하는 속성
▷ grid-area
span : '한 뼘', '~을 채우다'라는 사전적 의미. 행과 열을 병합할 때 사용하는 키워드.
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;▷ grid-template-areas / grid-area
.container{
grid-template-areas:
"header header header"
"section section aside"
"footer footer footer"
}
header{
grid-area:header;
}▶ grid 단축 속성
grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, grid-auto-flow
grid: auto-flow / 1fr 1fr 1fr;
grid: auto-flow dense / 40px 40px 1fr;생각 더하기
+ flex를 주면 width 값이 무시된다. 고정값이 주고 싶다면 다른 방식을 사용하자.
+ float는 1px의 차이에도 틀어질 수 있으니 주의하자.
+ float, flex, grid 등등... 어떤 장점과 어떤 단점을 가졌는지 파악하고 사용하자.
