css flex

css flex

 

#1 배경

 

flex는 기본적으로 “여러 태그를 하나로 묶어서 정렬”하는 것이다.

javascript를 비롯해 컴퓨터 언어는 “내 눈에 보이는”곳으로 이동할 수 없다.

따라서, 중앙에 놓고 싶다면 가로세로, 혹은 세로 가로로 규정을 해줘야한다.

 

 

#2 활용

display: flex;

묶음 설정된 태그들을 수평으로 나열해준다.

 

자식으로 따라오는 것들을 수직으로 나열하면

flex-direction: column;

 

자식으로 따라오는 것들을 수평으로 나열하려면

flex-direction: row;

 

가운데 수평기준으로 정렬

justify-content: center;

 

가운데 수직기준으로 정렬

align-items: center;

 

#3 심화

 

좀 더 살펴보자면

flex-direction, justify-content는 같은 방향으로 수평을 기본으로 움직인다.

align-items는 기본적으로 수직을 기본으로 움직여서 위의 2개와 반대로 움직인다.

 

space-between 아이템 사이에 균일 간격 정렬

space-around 아이템 둘레에 균일 간격 정렬

space-evenly 아이템 사이, 양 끝에 균일 간격 정렬

 

#4 position

 

position: absolute

박스의 절대위치

 

position: relative

부모 박스 기준으로 상대적 위치

 

position: fixed

화면을 기준으로 절대적 위치