[CSS] Display flex 속성

CSS로 중앙 배치를 하고 싶을떄, 주로 display : flex;를 이용하는 것을 알 수 있다.

CSS 기초에서도 배웠듯이 주로 가운데 정렬을 하기 위해서는 다음과 같이 작성을 하면 된다.

    display: flex; 
    flex-direction: row;
    align-items: center;
    justify-content: center; 

이떄 flex-direction 은 크게는 row와 colume으로 나뉜다.
크게는 메인축(main axis)와 교차축(cross axis)가 존재하는데, row와 colume은 두 축이 서로 반대이다.

• column (세로 정렬)

메인축(main axis) : y축
교차축(cross axis) : x축

• row (가로 정렬)

메인축 : x출
교차축 : y축

출처 OpenClassrooms

 

📌 flex : 정렬
: flex 속성 중에서 가장 중요하게 생각해야 할 개념이 바로 부모-자식 구조 이다.

flex - direction : row/colume; 을 사용할 경우, 가운데 정렬을 하고 싶은 자식이 있다면, 부모에게 flex를 적용해야 한다.
즉, 부모를 움직여 -> 가장 가까운 자식 요소를 정렬하는 것이 핵심이다! (부모 - 자식)

실제로 이 부분에 대한 개념이 잘 없어서 css 작성 할 때, 분명 정렬을 진행했는데 왜 안 움직이는걸까 라며 고민을 했던 적이 있다.

✅ flex 속성을 브라우저에서 바로 볼 수 있다.

• 개발자 도구(mac : opt + cmd + i) > element > display : flex; > 옆에 버튼 누르면 flex 속성 어떤 것을 사용할 지 확인 할 수 있다.
• 엄청나게 다양한 flex를 직접 하나하나 확인하면 쓸 수 있다.

네이버 웹툰 화면

 

📌 position
: display-flex가 아닌 position을 활용하여 실제 좌표계를 찍어 위치를 이동시키는 방법도 있다.

이때도 마찬가지로 부모-자식 구조가 중요하다.

(부모) position : relative;를 적용한다.
: 자식들은 나를 relative라고 생각하게 해. 내가 기준이야! 부모의 상대적인 좌표를 잡는 것이 중요하다.

(자식) position : absolute;
: 부모를 기반으로 좌표 4개를 설정 가능/ left, right, top, bottom

→ 이때 absolute는 음수도 들어갈 수 있. 음수 값을 사용하면 부모의 사이즈로부터 벗어나 테두리 밖으로 나갈 수도 있다!

사용 예시)

  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 

 

📌 flex-basis / grow / shrink
: 부모 요소의 크기에 맞춰서 얼마만큼의 몫으로 자기자신의 크기를 바뀐다.
(얘네 3개는 자식한테 적용)

▶️ 얘네는 잘 사용을 안 하지만 개념과 어떻게 쓰는지 정도는 알아두도록 하자.

• flex-basis : ; 하나의 item이 가질 수 있는 basis 값. 설정한 값 만큼 늘어남.
• flex-grow : ; 100% 기준으로 basis만큼 빼고, 영역 기준으로 해당 비율만큼 늘어남.
• flex-shrink : ; grow와 정반대.

* 다음에는 grid 개념도 한 번 알아보자.

* 요즘 웹 또는 모바일 화면을 보면, break point를 사용하여 사용자가 화면의 크기를 늘리고 줄일 때, 볼 수 있는 화면을 다르게 설정한다.