[220214] TIL

릿·2022년 2월 14일
0

TIL

목록 보기
3/28

1. 가운데 정렬

(부모일 경우, 높이값이 필요하다. 부모에 높이가 있을 경우, 자식에게는 높이값이 필요없다.)
display: flex;
height: 100vh;
justify-content: center;
align-items: center;

2. 일정비율을 유지하는 내비게이션

부모태그인 ul에
display: flex;
justify-content: space-around;
-를 하면 li들이 벌어진다.
li에 flex-basis를 주면 기본너비가 지정된다.

3. 반응형 헤더

헤더에 h1 logo쪽과 search부분을 떨어트려주기 위해서
display: flex;
justify-content: space-between; // 가쪽 벽에 붙어서 정렬
align-items: center; // 세로줄 맞춤

세로로 정렬되어 있는 아이들의 간격을 띄우려면
column-gap속성을 사용. (나는 margin을 썼었다.)

미디어쿼리 부분
header에 display: flex;
flex-direction: column; (flex-flow: column를 썼는데도 세로로 떨어지더라.)
height: max-content; (멋도 모르고 height속성에 4em부터 7em을 쓰며 맞췄다...)

max-content: grid아이템이 포함하는 최대크기를 나타냄
flex-direction: flex아이템의 주축과 방향을 지정하는 속성
flex-flow: flex-direction과 flex-wrap을 한꺼번에 지정하는 속성

profile
항상 재밌는 뭔가를 찾고 있는 프론트엔드 개발자

0개의 댓글