박스 배치를 더 쉽게 만들어주는 flex, grid

flex

flex : 1차원적 레이아웃 구성을 위해 사용됩니다.
부모 요소를 flex-container 자식 요소를 flex-item이라고 부릅니다.
부모 요소에 display: flex속성을 사용해 적용합니다.

flex-direction

요소가 배치되는 축의 방향을 정해주는 속성
flex-direction: [row/column/row-reverse/column-reverse]

1. flex-direction: row;
flex-direction의 기본값. flex-item 요소를 행 방향으로 진행

2. flex-direction: row-reverse;
flex-item 요소를 행의 역방향으로 진행

3. flex-direction: column;
flex-item 요소를 열 방향으로 진행

4. flex-direction: column-reverse;
flex-item 요소를 열의 역방향으로 진행

justify-content

요소를 축 방향으로 정렬하는 속성
justify-content: [flex-start/flex-end/center/space-between/space-around/space-evenly]

1. justify-content: flex-start;
기본값. flex-item 요소를 주축의 시작점으로 정렬

2. justify-content: flex-end;
flex-item 요소를 주축의 끝나는 지점으로 정렬

3. justify-content: center;
flex-item 요소를 주축의 중간 지점으로 정렬

4. justify-content: space-between;
flex-item 요소의 사이에 균일한 간격을 만들어 배치

5. justify-content: space-around;
flex-item 요소의 둘레에 균일한 간격을 만들어 배치

6. justify-content: space-evenly;
flex-item 요소의 사이와 양 끝에 균일한 간격을 만들어 배치

align-items

수직으로 요소를 정렬하는 속성
align-items: [stretch/flex-start/flex-end/center/baseline]

1. align-items: stretch;
flex-item 요소를 축 방향으로 끝까지 늘려준다

2. align-items: flex-start;
flex-item 요소를 주축 기준 시작점으로 정렬

3. align-items: flex-end;
flex-item 요소를 주축 기준 끝나는 지점으로 정렬

4. align-items: center;
flex-item 요소를 중앙으로 정렬

5. align-items: baseline;
flex-item 요소를 텍스트 기준 baseline으로 정렬

align-content

flex-container요소에 display:flex;가 지정된 상태에서 2줄 이상의 요소를 정렬하는 속성
align-content: [stretch/flex-start/flex-end/center/space-between/space-around/space-evenly]

1. align-content: stretch;
flex-item 요소를 축 방향으로 끝까지 늘려준다

2. align-content: flex-start;
flex-item 요소를 시작점으로 정렬

3. align-content: flex-end;
flex-item 요소를 주축 기준 끝나는 지점으로 정렬

4. align-content: center;
flex-item 요소를 수직 중앙으로 정렬

5. align-content: space-between;
flex-item 요소의 사이에 균일한 간격을 만들어 배치

6. align-content: space-around;
flex-item 요소의 둘레에 균일한 간격을 만들어 배치

7. align-content: space-evenly;
flex-item 요소의 사이와 양 끝에 균일한 간격을 만들어 배치

gap

gap: 10px; : flex-item 사이에 간격을 주고 싶을 때 사용

flex-wrap

flex-container가 flex-item을 한줄에 담지 못할 때 행으로 나눌것인지 결정하는 속성입니다.

flex-wrap: nowrap; : 기본값. flex-container가 flex-item을 한줄에 담지 못할 때 넘쳐 흐릅니다.

flex-wrap: wrap; : flex-container가 flex-item을 한줄에 담지 못할 때 줄바꿈 합니다.

flex-wrap: wrap-reverse; : flex-container가 flex-item을 한줄에 담지 못할 때, flex-item을 역순으로 배치하여 줄바꿈 합니다.

flex-flow

flex-direction flex-wrap 의 단축속성 입니다.

.flex-container{
	flex-flow : row wrap-reverse; 
}

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

두개의 CSS는 같은 의미입니다.

flex-[grow/shirink/basis]

flex-basis

flex-basis는 flex-item의 공간을 배분하기 전 기본 너비를 설정합니다. 기본값은 'auto'

flex-grow

flex-grow는 flex-item이 가지고 있는 값보다 커질 수 있는지 설정하는 속성입니다. 기본값은 '0'

<div class="flex-container">
	<div class="flex-item">A</div>
	<div class="flex-item">B</div>
	<div class="flex-item">C</div>
</div>

.flex-container{  
    display: flex;
    padding: 10px;
    gap: 10px;
}
.flex-item{
	width: 80px;
}
.flex-item:first-child{
    flex-grow: 1;
}
.flex-item:nth-child(2){
    flex-grow: 2;
}
.flex-item:last-child{
    flex-grow: 3;
}

flex-grow 값으로 가변 넓이를 가지게 되어 1 : 2 : 3의 비율이 적용된 모습

flex-shrink

flex-shrink는 flex-item이 가지고 있는 값보다 작아질 수 있는지 설정하는 속성입니다. 기본값은 '1'

.flex-container{  
    display: flex;
    padding: 10px;
    gap: 10px;
}
.flex-item{
	width: 150px;
}
.flex-item:first-child{
    flex-grow:1;
}
.flex-item:nth-child(2){
    flex-basis: 150px;
    flex-shrink: 0;
}
.flex-item:last-child{
    flex-grow: 1;
}

flex-shrink:0을 준 B는 크기가 더 이상 작아지지 않게 됩니다.

flex 단축속성

커지는가/작아지는가/기본크기는

`flex: [grow/shirink/basis];` 순으로 작성합니다.

align-self

align-self: [stretch/flex-start/flex-end/center/baseline]
부모의 align-items 속성을 덮어 flex-item에게 개별적인 align-items 속성을 부여합니다.

order

order: number;
flex-item들의 순서를 수의 크기로 결정합니다. 수가 작을수록 우선순위이며 음수도 사용 가능합니다.

<div class="flex-container">
	<div class="flex-item">A</div>
	<div class="flex-item">B</div>
	<div class="flex-item">C</div>
</div>

.flex-item:first-child{
	order:2;
}
.flex-item:nth-child(2){
	order: 3;
}
.flex-item:last-child{
	order: 1;
}

grid

grid : 2차원 레이아웃을 위해 사용됩니다.
부모요소를 grid-container 자식 요소를 grid-item으로 부릅니다.

grid-container

grid-container 구성요소

grid container : 그리드의 가장 바깥 영역
grid cell: 그리드의 한 칸 (개념적인 정의)
grid item : 그리드 컨테이너의 자식 요소들
grid track : 그리드의 행(row) 또는 열(column)
grid line : 그리드 셀을 구분하는 선
grid number : 그리드 라인의 각 번호
grid gab : 그리드 셀 사이의 간격(gutter)
grid area : 그리드 셀의 집합

grid-container에서 사용되는 속성

grid-template-columns : 열방향 그리드 트랙의 사이즈를 설정합니다.
grid-template-rows : 행방향 그리드 트랙의 사이즈를 설정합니다.

fr 단위는 fraction(분수)의 약자로 grid container 안에서 grid track의 비율을 지정해주는 유연한 길이 단위

grid-container에서 사용되는 함수

1. repeat
   grid-template-[columns/rows]: repeat(반복횟수, 반복할 값);
   반복할 값을 반복횟수만큼 반복합니다.
2. minmax
   grid-template-rows: repeat(3, minmax(120px, auto));
   min보다 크거나 같고, max보다 작거나 같은 값을 크기 범위를 지정합니다.
3. auto-fill / auto-fit : repeat 함수 사용 시 반복되는 값을 고정하지 않고, grid container 넓이에 따라 grid cell을 배치하기 위해 사용되며
   auto fill은 가능한 많은 셀을 생성하며 빈공간이 생기고 auto fit은 gird container에 빈공간이 생기면 각 셀들이 그 공간을 나눠가지게 됩니다.
   grid-template-columns: repeat(auto-fit/fill, minmax(120px, auto));}
4. gap

grid-item에서 사용되는 속성

행/열 지정으로 정의

grid-row-start: 1; : 열 시작점 지정
grid-row-end: 2; : 열 끝 지점 지정
grid-column-start: 1; : 행 시작점 지정
grid-column-end: 2; : 행 끝 지점 지정

• 단축속성
  gird-row: 1 / 2 : 열 시작점 / 끝 지점 지정
  grid-column: 1 / 2 : 행 시작점 / 끝 지점 지정
  grid: 1 / 2 / 3 / 4 : 열 시작점 / 행 시작점 / 열 끝 지점 / 행 끝 지점

행과 열을 병합할때는 span을 사용합니다.

구역 이름으로 정의

grid-item{
	grid-template-areas:
    "header header header"
    "main main aside"
    "footer footer footer"
}
header{
	grid-area: header;
}
main{
	grid-area: main;
}
aside{
	grid-area: aside;
}
footer{
	grid-area: footer;
}

grid-template-area 속성으로 구역의 이름을 정의하고 구역을 나눠준 후 grid-area를 사용해 tag들의 위치를 지정해줄 수 있습니다.