Flex 별 거 아냐 - 자식요소편 — 지현의 개발자 성장과정

이번에는 자식에게 할 수 있는 속성들에 대해 알아보겠다.

전제조건은 부모요소에 display:flex 속성이 적용되어있어야 한다.

order

우리는 각각의 자식들에게 order속성, 즉 순서를 줌으로써 쉽게 위치를 바꿀 수 있다.

여기서 3번 박스를 가장 첫번째로 배치하려면 어떻게 해야 할 까?

정답은 3번 박스 스타일에 order: -1; 속성을 주면 된다.

  .three {
        width: 100px;
        height: 100px;
        background-color: blanchedalmond;
        order: -1;
      }

왜 1이 아닌 -1인가?

그 이유는 기본적으로 모든 박스의 order 속성이 ‘0’이기 때문이다.

때문에 원하는 박스를 맨 앞으로 보내주고 싶으면 -1, 맨 뒤로 보내주고싶으면 1을 주면 되고,

모두 새로운 순서를 부여해줄 수도 있다. 쉽게 생각하면 숫자가 적을수록 앞순서에, 클 수록 뒷순서에 위치한다고 보면 된다.

flex-basis: <length>

width property 대신 쓰이며 아이템의 기본 width값을 정해준다.

보통 뒤에 나올 flex 속성 안에서, width 대신에 값을 지정해주는게 좋다. (width코드를 굳이 한번 더 안써도 되니까)

  .one {
        height: 100px;
        background-color: blueviolet;
        flex-grow: 1;
        flex-basis: 100px;
      }

flex-grow / flex-shirnk

두 속성은 "flex-basis" 속성으로 정한 플렉스박스 아이템의 기본 너비를 자동으로 늘어나거나(flex-grow) 줄어들도록(flex-shrink) 해서 행 안에 적절한 너비로 배치되도록 맞추는 기능을 합니다.

말 그대로 자라나라 고무고무 flex-grow

차지가 가능한 모든 여백을 차지한다.

>박스 1에 flex-grow를 1만큼 줘보자.

.one {
 width: 100px;
 height: 100px;
 background-color: blueviolet;
 flex-grow: 1;
}

박스 1, 박스 2 동시에 flex:grow를 1만큼 줘보자.

차지가 가능한 공간을 박스1, 박스 2가 정확히 1:1 (같은 비율)로 차지한 것을 볼 수 있다.

계산의 원래는, 부여된 모든 속성값의 합을 구해서 (여기서는 박스 1,2에 1씩 줬으니까 1+1=2)

남는 여백을 그 합만큼(2로 나누기) 나누고 나눈 값을 비율 숫자만큼 너비로 더한다.

아래 예시를 보면 쉽게 이해 가능하다.

이렇게 뷰포트의 크기에 따라 자동으로 반응하기 때문에 반응형 웹을 만들 때 flex가 왕왕 사용된다.

줄어들 때의 속성을 정하는 flex-shrink

기본값이 1이기 때문에, 따로 설정하지 않으면 자동으로 아이템이 축소적용된다.

이 때 부모박스에 flex-wrap속성을 'wrap'으로 설정되었다면 이 기능은 적용되지 않는다.

warp으로 설정하면 레이아웃의 너비를 넘어갈 경우 다음 행의 왼쪽부터 다시 배치되기 때문이다.

(그래서 실무에서는 굳이 이 값을 바꾸지 않는다. 특별한 목적이 있지 않고서야..)

또 기본값이 1이기 때문에 자동으로 아이템 너비가 축소되지 않도록 하려면 반드시 "flex-shrink: 0;"을 아이템에 선언해야 한다.

>부모박스의 너비보다 자식박스들의 너비의 합이 더 클 때, 박스1에 flex-shitink: 2;를 준 경우

 .parents {
        height: 500px;
        width: 500px;
        border: 10px solid black;
        display: flex;
      }
      .one {
        flex-basis: 300px;
        flex-grow: 1;
        height: 100px;
        background-color: blueviolet;
        flex-shrink: 2;
      }
      .two {
        flex-basis: 300px;
        height: 100px;
        background-color: aqua;
        flex-grow: 1;
      }
      .three {
        flex-basis: 300px;
        height: 100px;
        background-color: blanchedalmond;
        flex-grow: 1;
      }

flex: -grow, -shirnk, -basis

위 속성은 쓰여진 순서에 따라 한번에 적용할 때 사용한다.

앞서 배운 내용에 따르면 기본값은 flex: 0, 1, auto; 이다.

>바로 위 코드들을 flex를 사용해서 코드를 줄여보자

.parents {
        height: 500px;
        width: 500px;
        border: 10px solid black;
        display: flex;
      }
      .one {
        height: 100px;
        background-color: blueviolet;
        flex: 1 2 300px;
      }
      .two {
        height: 100px;
        background-color: aqua;
        flex: 1 1 300px;
      }
      .three {
        height: 100px;
        background-color: blanchedalmond;
        flex: 1 1 300px;
      }

align-self

부모요소의 align-items를 덮어씌우면서 각각 개별박스의 속성을 정해줄 수 있다.

stretch / flex-start / flex-end / baseline / center 가 있다.

  .two {
        height: 100px;
        background-color: aqua;
        flex: 1 1 300px;
        align-self: center;
      }

.two {
        height: 100px;
        background-color: aqua;
        flex: 1 1 300px;
        align-self: center;
      }
      .three {
        height: 100px;
        background-color: blanchedalmond;
        flex: 1 1 300px;
        align-self: flex-end;
      }

Flex는 Grid와 함께 CSS 실무에서, 특히 반응형 웹을 만들 때 가장 많이 사용되는 속성이다.

처음에는 전혀 와닫지 않는 속성의 이름들 (ex: justify-content , align-items)때문에 장벽이 조금 있는데,

계속 사용해서 익숙하게 만드는 수 밖에 없다.

이렇게 flex의 기초 개념을 잡은 뒤로는 반응형 '네비게이션 바 만들기'를 직접 해보는 걸 추천한다!

배운걸로 이렇게 반응형 웹사이트를 바로 만들어볼 수 있다니 정말 멋지지 않은가?

저작자표시

'Front-End Developer > CSS' 카테고리의 다른 글

가운데정렬의 난 case 1 - 이미지와 텍스트 수직정렬하기 (0)	2022.04.11
배운 flex로 있어보이는 반응형 Nav 바 만들어보기 (2)	2022.04.10
니가 누구던지 센터로 가버려 - CSS 중앙정렬 4가지 방법 (5)	2022.04.07
Flex 별 거 아냐 - 부모요소 편 (2)	2022.04.07
Let's Conquer CSS Margin Collapse (4)	2022.04.06