플렉스 박스는 각 요소들을 배치하는 기법이다
사용자들 마다 화면 크기가 다른 경우(기기마다)
Flexbox를 통해서 웹사이트의 요소들을 배치하기 쉽게 만들어준다.
flexbox 사용 방법
display: flex;를 사용한다
이때 사용하고 싶은 요소에 직접 추가하는 게 아닌 부모요소에 display:flex를 사용한다.
즉 display: flex;를 사용하게 되면 해당 컨테이너 내의 모든 자식 요소들은 flex 아이템이 된다.
Flex는 기본족으로 가로축이 메인으로 잡힌다
flex-direction :
row : 메인 축을 가로 방향으로 정할 수 있다 [해당 값은 기본 값이다]
row-reverse: 메인축 가로 방향으로 정하되 역 방향이 된다.
column: 메인 축을 세로 방향으로 정한다.
column- reverse : 메인 축을 세로 방향으로 정하지만 역방향이 된다.
메인 축을 통해서 요소들을 원하는 위치에 적용을 시키고 싶을 땐
justify-content 속성을 통해서 위치를 시키면 된다.
교차축 방향으로 요소들을 위치시키고 싶을 땐 align-items 속성을 추가 시키면 된다.
'Javascript' 카테고리의 다른 글
CSS : margin과 padding 내용 정리하기 (0) | 2024.10.09 |
---|---|
Javascript 개념 정리하기 (0) | 2024.10.08 |
자바스프링 request객체와 session 객체 차이점 (0) | 2024.10.06 |
자바스크립트 객체 배열을 사용하여 다량의 데이터 관리 (0) | 2024.08.19 |
자바스크립트 Date 함수 (0) | 2024.08.18 |