CSS Flex 플렉스 with Flexboxfroggy

phoenix·2021년 9월 26일
0

CSS Flex
Flex는 레이아웃 배치 전용 기능으로 float, inline-block등의 기존 방식보다 보다 더 편리하고 사용하기 간편하다!

flex는 block속성의 items을 display: flex;를 통해 한줄에 나열 할 수 있게 해준다

Flexbox Froggy examples

justify-cotent (x축으로 움직임)

justify-content: flex-end;를 이용하여 #pond라는 컨테이너 안에 있는 개구리 요소를 오른쪽 끝으로 정렬 하였다!

justify-content: center;를 하여서 요소들을 컨테이너의 정중앙으로 정렬 하였다

justify-cotent: space-around;를 이용하여 요소들을 이동하였다 하지만 여기서 주의해야 할 점이 바로 수련잎 주위에는 많은 간격들이 있다 만약 수련잎이 양옆에 딱 붙어있고 간격들이 존재 하지 않았다면 justify-content: space-between; 사용해야 한다 space-around는 양옆에 간격이 생긴다

align-items (y축으로 움직임)

align-items는 세로축으로 움직인다 따라서 align-items: flex-end 이용하여 컨테이너안의 요소들을 y축의 바닥으로 보냈다

요소를 컨테이너의 정중앙으로 x축의 중앙 y축의 중앙으로 이동 시키고 싶을때는

이렇게 justify-content:center align-items:center를 해주면 x축의 중앙 y축의 정중앙으로 이동한다

먼저 양옆에 간격이 있는것을 확인 한 순간 내 머리속에는 바로 space-around가 들어왔다 그리고 수련잎들이 y축의 바닥에 위치하니 개구리들을 바닥으로 보내려면 align-items: flex-end;를 해줘야 한다

flex-direction (요소들의 방향전환)

먼저 개구리들이 색깔에 맞는 수련잎으로 들어가야한다

flex-direction: row-reverse를 통해 개구리들을 row의 반대방향으로 정렬하였다

이번에도 개구리를 각자 맞는 색의 수련잎으로 넣어야하는데 이번에는 x축으로 이동한게아니라 y축의 변화가 있다

하지만 이번에는 개구리들이 딱 색에 맞게 처음부터 서있어서 따라서 column만 해주면 flex의 방향이 column으로 바뀌게 된다

이번엔 개구리들이 다른 색의 수련잎위에 벌써 들어가있다 조금 복잡해보이지만 row-reverse와 justify-content: flex-end를 사용한다 왜 수련잎은 다 왼쪽에 위치하는데 flex-end냐면 reverse를 하면 start와 end의 순서도 바뀐다.

이번에는 flex-direction의 방향이 column을 해야 할 경우 justify-content와 align-items의 축이 바뀌는 것을 알아 보자

현재 개구리들의 flex-direction은 default값인 row이다 근데 수련잎들은 column방향을 가지고 있어서 flex-direction을 통해 개구리들의 방향을 변경해준다 그리고 사용해야할것은 y축으로 있다고 해서 align-items가 아닌 justify-content를 사용해야 한다 왜냐하면 flex-direction을 column으로 변경시 justify-content가 더이상 x축에 관여하는것이 아니라 y축 즉 세로방향으로 바뀌게 된다

profile
phoenix

0개의 댓글