CSS flex, grid 정리

주로 사용하는 엘리먼트

div: 개행 처리(display: block)

section: 개행 처리(display: block)

a: 개행 X(display: inline)

span: 개행 X(display: inline)

 

display

block은 크기 조절이 가능

inline은 크기 조절이 불가능

inline-block은 인라인과 블록 속성을 동시

 

display: flex

flex는 container에 적용

flex-direction: row(기본), column 

flex-wrap: wrap(브라우저 스크롤에 따라 정렬) 

justify-content: flex-start(기본), flex-end, center, space-between, space-around (row 정렬)

align-items: stretch(기본), flex-start, flex-end, flex-center (column 정렬)

align-content: flex-start

 

item에 적용

flex: 1; (각 비율을 정할 수 있음)

align-self: flex-start, center, flex-end

order: 1 (순서를 지정)

 

자식 선택자

.item:nth-child(1){

 flex: 1;

 order: 1;

}

.item:nth-child(2){

 flex: 2;

 order: 2;

}

 

display: grid

grid는 container에 적용

display: grid (grid 간 간격)

grid-template-columns: 4fr 6fr

grid-gap: 1rem;

grid-template-columns: repeat(3, 1fr) => 1fr, 1fr, 1fr

grid-template-columns: 200px 1fr (고정)

grid-auto-rows: minmax(10em, auto) (row 크기 고정)

justify-items: start, center, end

align-items: start, center, end

 

item에 적용

.item:nth:child(1){

 justify-self: start;

 align-self: center;

}

 

.item:nth-child(1){

 gird-column: 1/4; (1~4까지 정렬, 웹사이트 헤더)

}

 

.item:nth-child(2){

 grid-column: 3;

 gird-row: 2/4; (1~4까지 정렬, 웹사이트 헤더)

}

 

box-sizing

box-sizing: border-box(border까지 width에 포함)

box-sizing

font-size

font-size로 인해 inline-block이 제대로 적용되지 않을 수 있음. 따라서 font-size=0으로 맞춰줌

rem의 경우 root em: 16px

 

폭 정리

max-width: 1000px;

margin:0 auto; (margin-left: auto; margin-right: auto;)

 

반응형

@media screen and (min-width: 700px){

}