[ CSS ] flex 정리 (위치 조절, 요소간의 순서 변경 및 flex-grow, flex-shrink, flex-basis)

 

 

이 전 글을 보면 flex는 위치를 조정하고 싶은 element의  직속 부모로부터 컨트롤하여 위치를 조정한다고 소개했었다.

이번엔 어떠한 방식으로 위치를 다양하게 옮기는지에 대해 정리해보려고 한다.

 

 

flex는 main axis와 cross axis를 기준으로 위치를 변경한다.

main axis는 flex-direction으로 변경이 가능한데

defalut값은 row로 왼쪽 그림에 해당한다.

만약 main-axis를 오른쪽 그림과 같이 가지고 싶다면 [ flex-direction:cloumn; ] 을 해주면 된다.

 

 

 

 

이제 위치를 변경시켜볼텐데

main axis을 기준으로 값을 변경하고 싶을 때는 justify-content

cross axis을 기준으로 값을 변경하고싶을 때는 align-items를 사용하여 변경할 수 있다.

( 그림을 잘못 그렸다 ... y축으로 내려가는 방향이다 .. )

 

 

[ main axis = row ] 인 경우 main-axis를 통한 위치 조절

 

justify-content : flex-start;

main axis 즉 x축의 가장 앞으로 배치된다.

 

 

justify-content:flex-end;

main axis 즉 x축의 가장 뒤로 배치된다.

 

 

justify-content:center;

main axis 즉 x축의 가운데로 배치된다.

 

 

justify-content:space-around;

요소들 양 옆으로 같은 크기의 여백이 생기는 것

 

 

justify-content:space-between;

요소들의 사이로 같은 크기의 여백이 생기는 것

 

 

 

 

[ main axis = row ] 인 경우 corss-axis를 통한 위치 조절

 

* 이 경우에는 직속 부모 element에 높이를 지정해주어야 위치가 변경된다 *

아래의 예시를 통해 알 수 있는데 왼쪽의 경우 높이를 주지 않은 상태에서 align-items:center를 추가한 경우고

오른쪽의 경우 높이를 준 상태에서  align-items:center를 추가한 경우이다.

 

 

이러한 현상이 발생하는 이유는 부모의 높이가 없을 경우 자식 element의 높이가 부모의 높이와 일치하게 되어

이동할 공간이 없이 꽉 차 버리기 때문이다.

만약 y축 상의 위치를 변경해야 한다면 꼭 높이를 지정해주자! 

 

 

align-items:flex-start;

corss axis 즉 y축의 가장 위로 배치된다.

 

 

align-items:flex-end;

corss axis 즉 y축의 가장 아래로 배치된다.

 

 

align-items:center;

corss axis 즉 y축의 가운데로 배치된다.

 

 

align-items:stretch;

corss axis 즉 y축의 처음과 끝까지 늘어나 배치된다.

이 경우에는 자식 element의 높이를 정해놓으면 stretch 되지 않는다.

 

 

 

 

 

---

 

 

 

 

[ 요소 간의 순서 변경 ]

코드를 작성하다보면 HTML에 작성해놓은 element 간의 위치를 바꾸고 싶을 때가 있다.

그런데 HTML 코드를 직접적으로 파일 수정은 할 수가 없는데 이때 css를 이용하면 위치를 바꿀 수 있다.

 

 

 

1. order 사용하기

모든 요소의 defalut 값은 0으로 수가 커질수록 오른쪽에 배치되며 HTML code에는 영향을 주지 않는다.

-> 음수도 가능

 

아래의 예시를 통해 자세히 알아보자

왼쪽 사진의 경우 분홍색 element의 order값인 defalut값이 0이다.

오른쪽 사진의 경우 1,3번 element의 order값이 0이며 2번 element의 경우 order값은 1이다.

-> 즉 order 값이 0 0 1 인 순으로 배치되는 것이다. 

-> 동일한 order값일 경우 코드상에 윗부분에 작성한 element들이 먼저 오게 된다.

 

2. -reverse 사용하기

-reverse는 flex-direction이나 flex-wrap 값에 지정하는 것으로 모든 element가 반대로 위치한다.

 

row-reverse

→ 주축에서 요소를 놓는 방향이 오른쪽에서 왼쪽으로 변경된다.

 

이 상태에서 justify-content를 flex-end로 설정하면 왼쪽 끝으로 이동한다.

→ 주축의 끝이 왼쪽이기때문

 

 

column-reverse

 

 

wrap-reverse

 

 

 

 

---

 

 

 

[ flex의 특징 ]

 

display가 flex인 부모의 자식 element의 배치를 하다 보면

아무리 element들이 많아지더라도 한 줄에 element들이 존재하도록 한다.

문제는 이러한 과정 속에서 element의 크기들이 줄어든다는 것인데

이러한 문제가 발생하는 이유는 flex-wrap값이 nowrap이기 때문이다.

 

 [ flex-wrap : nowrap; ] 

아래의 사진을 보면 분명 element의 크기를 200px X 200px로 해놓았으나 너비 값이 줄어든 것을 알 수 있다.

 

우리는 아무런 설정을 하지 않는 경우 모든 element가 공평한 크기로 늘어나고 줄어든다.

상황에 따라 특정 element가 더 많이 커지고 작아지길 원한다면

flex-grow , flex--shrink를 통해 설정할 수 있다.

 

 [ flex-wrap : wrap ]

element들의 크기를 변형시키지 않기를 원한다면 flex-wrap을 wrap으로 변경해주면 된다.

그렇게 되면 아래의 사진처럼 element의 크기를 해치지 않으면서 여러 줄에 요소들을 배치시킨다.

 

[ align-content: flex-start; ] - 다중라인 적용시 [ flex-wrap : wrap ]

그런데 자세히 보면 123과 456 element 라인 사이에 알 수 없는 빈 공간이 생성되었다.

이러한 빈 공간을 없애고 싶을 때 사용하는 것이 align-content이다.

flex-start값을 주게 되면 요소들이 모두 위로 붙는다.

 

 

[ align-content: ? ] 

wrap으로 지정해버리면 요소들 사이에 line(빈 공간)이 생기게 되고 align-items가 제대로 적용이 되지않는다.

이때에 align-content를 사용하면 align-items와 같은 효과를 낼 수 있다.

 

 

[ flex-flow : direction wrap] 

하나의 속성으로 flex-direction과 flex-wrap을 설정한다.

 

[ align-self : ? ]

자식 요소 개별로 align을 적용하는 것

 

---

 

[ 요소 사이에 특정 값만큼 공간 만들기 ]

gap : ?

→ 요소 양쪽으로 ?만큼의 공간이 생긴다.

→ 직속 부모 요소에 적용해야하는 속성

→ 어떤 자식 요소들이 공간을 가지는지는 알 수 없다.

 

row-gap : ?

column-gap : ?

행과 열에 각각 값을 줄 수 있다.

 

 

---

 

 

직접 값을 설정하지 않고 flex container을 이용해 크기 설정하기 - 반응형

 

[ flex-grow ]

element의 행동을 정의하며 flex의 자식일 때 화면의 크기를 늘리게 되면 빈 공간이 늘어되는데

이때 어떤 박스가 얼마큼 더 공간을 가져갈지 정한다.
0이 기본값, 값이 커질수록 더 늘어난다.

→  flex-grow:1과 flex-grow:2가 있을 경우 남은 공간의 3분의 1, 3분의 2를 각각 가져간다.

→ 0으로 지정시 크기가 늘어나지않는다.

 

[ flex-shrink ]

element의 행동을 정의하며 flex의 자식일 때 화면의 크기를 줄이게 되면 박스가 줄어드는데

이때 어떤 박스가 얼마큼 더 줄어들지 정한다.
1이 기본값, 값이 커질수록 크기가 더 빨리 줄어든다.

→ 0으로 지정시 크기가 줄어들지않는다.

 

 

[ flex-bias ]

child에게 적용되는 속성으로 main axis에서만 일어나며 창의 크기가 변경되기 전의 이상적인 크기를 지정하는 것이다.

//min-width와 등일함 , 최소의 크기가 500이고 화면의 크기에 따라 요소의 크기가 변하지않기때문
flex-shrink : 0;
flex-basis : 500px;

//max-width와 등일함 , 최대의 크기가 500이고 화면의 크기에 따라 요소의 크기가 변하지않기때문
flex-grow : 0;
flex-basis : 500px;

 

 

[ flex-gorw, flex-shrink, flex-basis 한 번에 설정하기 ] 

flex: 1 0 500px;