이제 플렉스에 대해 알아보자. 플렉스(flex)는 1차원의 레이아웃 개념과 같다. 이전까지 요소를 출력했을 때는 수직으로 출력되었다. 수평 정렬 할 때는 아주 간단하게 display: flex; 값만 넣어주면 된다! 이 때 flex 값을 넣어 준 요소는 container, 수평 정렬 된 요소들은 item 이라고 부른다. css에서 container와 itme에 넣을 수 있는 속성들이 각각 다르다는 점에 주의하자.
- dispaly : Flex Container의 화면 출력 특성을 지정하는 속성이다. 다른 값으로 이전에 block과 inline 등 을 넣어 사용했다. Flex Container를 inline 요소처럼 활용해야 할 때는 inline-flex 값을 주고, block처럼 활용할 때는 flex 값을 주면 된다. 즉 inline-flex 값을 주면 container가 인라인 요소들 처럼 가로로 쌓이고, flex 값을 주면 세로로 쌓인다고 보면 된다.
- flex-direction : container의 주 축을 설정하는 속성이다. 기본값은 수평축이 주 축이 되는 row(좌->우)이고, 반대로(우->좌) 할 때는 row-reverse 값을 사용한다. 수직과 관련된 주 축을 설정할 땐 column(위->아래), 반대로(아래->위) 할 때는 column-reverse 값을 사용한다. 말 보다 그림으로 보는게 이해하기 쉬울듯! 참고로 flex는 수평 정렬할 때 주로 사용하므로 column값은 굳이 사용하는 경우가 잘 없다.
아래는 수평축이 주 축이 되는 값을 넣은 경우이다. 수평 정렬 되고 x축이 주 축, y축이 교차축이 된다.
아래는 수직축이 주 축이 되는 값을 넣었을 때 이다. 여기서는 수직 정렬 되고 y축이 주 축, x축이 교차축이 된다.
※ 본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
'etc... > 패스트캠퍼스 챌린지' 카테고리의 다른 글
패스트캠퍼스 챌린지 18일차 - Part1. Ch8 (0) | 2021.11.18 |
---|---|
패스트캠퍼스 챌린지 17일차 - Part1. Ch8 (0) | 2021.11.17 |
패스트캠퍼스 챌린지 15일차 - Part1. Ch8 (0) | 2021.11.15 |
Java & SpringBoot로 시작하는 웹프로그래밍 : 자바 인강 - Ch.1 (0) | 2021.11.14 |
패스트캠퍼스 챌린지 14일차 - Part1. Ch8 (0) | 2021.11.14 |