Javascript

CSS Flexbox란??

최종군 2024. 10. 7. 20:35

플렉스 박스는 각 요소들을 배치하는 기법이다 

사용자들 마다 화면 크기가 다른 경우(기기마다)

Flexbox를 통해서 웹사이트의 요소들을 배치하기 쉽게 만들어준다. 

 

 

flexbox 사용 방법 

 

display: flex;를 사용한다 

 

이때 사용하고 싶은 요소에 직접 추가하는 게 아닌 부모요소에 display:flex를 사용한다. 

즉 display: flex;를 사용하게 되면 해당 컨테이너 내의 모든 자식 요소들은 flex 아이템이 된다. 

 

Flex는 기본족으로 가로축이 메인으로 잡힌다

 

flex-direction

row : 메인 축을 가로 방향으로 정할 수 있다 [해당 값은 기본 값이다]

row-reverse: 메인축 가로 방향으로 정하되 역 방향이 된다.

 

column: 메인 축을 세로 방향으로 정한다. 

column- reverse : 메인 축을 세로 방향으로 정하지만 역방향이 된다. 

 

 

메인 축을 통해서 요소들을 원하는 위치에 적용을 시키고 싶을 땐 

justify-content 속성을 통해서 위치를 시키면 된다. 

교차축 방향으로 요소들을 위치시키고 싶을 땐 align-items 속성을 추가 시키면 된다.