[HTML/CSS] Day20. Flex(2) 🤷‍♂️

자, 다시 flex 정리 시간이다.
이번에 다룰 flex 속성은 flex-basis, flex-shrink, flex-grow이다.

이번 속성들은 컨테이너 요소가 아닌 "자식 요소(flex-item)"에 적용하는 속성이다.

이 부분은 flex를 사용할 때 웬만하면 건드리지 않던 속성인데 생각보다 유용한 부분이 있어서 정리하려고 한다.

- flex-basis

flex-basis는 말 그대로 "기초"라는 말이다. 기본적인 자식 요소들의 크기를 지정하는 것이다.
이것 또한 앞에서 언급했던 Main-axis에 따라 달라진다.

값의 경우 다양한 단위를 사용하여 설정할 수 있다.

.item {
	flex-basis: auto;
	/* flex-basis: 0; */
	/* flex-basis: 50%; */
	/* flex-basis: 300px; */
	/* flex-basis: 10rem; */
	/* flex-basis: content; */
}

content라는 단위가 어색할 수 있는데 콘텐츠 영역의 크기만큼 조절된다고 생각하면 된다.

만약 flex-direction의 값이 row라면 너비를, column이라면 높이에 기본적인 크기로 적용이 된다.
아래 이미지는 flex-direction을 각각 row, column을 적용시키고 자식요소에 flex-basis:100px를 적용한 결과이다.

보면 row일때는 자식요소의 너비가 늘어났고, column일때는 자식요소의 높이가 늘어난 것을 볼 수 있다.

여기서 그럼 width와 height를 적용하는 것과 flex-basis를 적용한 것은 뭐가 다른거지?

아래의 소스 코드에서는 자식 요소에 height:100px를 주고 요소에 각각 width:200px과 flex-basis:200px을 적용시켜보았다.

flex-direction는 row로 되어있기 때문에 flex-basis:200px은 width:200px과 같은 결과를 나타낼 것이다.

.container div {
        height: 100px;
      }

      .box1 {
        width: 200px;
        background-color: lightcoral;
      }
      .box2 {
        flex-basis: 200px;
        background-color: lightsalmon;
      }

<div class="container">
      <div class="box1">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum ad
        adipisci eligendi in, impedit fugiat, consequatur ullam optio iure alias
        corrupti magni ab commodi numquam facilis, sapiente error iste
        harum!dsadasdadsadadsasdadsasdadsadasdadsadadsasdadsasda
      </div>
      <div class="box2">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum ad
        adipisci eligendi in, impedit fugiat, consequatur ullam optio iure alias
        corrupti magni ab commodi numquam facilis, sapiente error iste
        harum!dsadasdadsadadsasdadsasdadsadasdadsadadsasdadsasda
      </div>
    </div>

아래의 결과가 어떻게 되었는지 살펴보도록 하자.

.box1은 width:200px이 고정이 되어 콘텐츠가 요소의 영역을 넘어 아래로 내려간 것이 보인다.

하지만 아래 이미지에서 볼 수 있듯 .box2는 flex-basis:200px가 적용된 기본 너비 '200px'(빗금친 부분)보다 더 많은 영역(화살표 부분)을 차지하는 것을 볼 수 있다.

이를 보면 width를 적용하면 강제적인 고정값으로 딱 그 만큼의 영역만을 차지하는 것을 알 수 있고, flex-basis는 콘텐츠의 영역에 따라 유동적으로 변할 수 있다는 것을 알 수 있다.

뒤에 요소가 더 있더라도 겹치지 않고 이어서 정렬이 되는 것도 알 수 있다.

그리고 flex-basis가 기본값인 auto가 아니고 그 외의 수치가 width와 동시에 적용되어 있다면 flex-basis를 우선적으로 적용한다.

위의 이미지처럼 width만 설정했을 때는 적용한 고정값만 유지하는 것을 볼 수 있다.

flex-basis:200px을 함께 적용했을 때는 "200px"로 바뀐 것을 볼 수 있다.

여기서 나의 의문점 : width와 flex-basis가 동시에 적용이 되었을 때 flex-basis가 우선적용이 되는데 왜 콘텐츠 영역만큼 늘어나지 않을까?

위의 소스코드의 결과를 다시 한번 보자.

여기서 2번째 박스는 flex-basis: 200px만 적용되어있다. 하지만 '200px'이 아닌 아래의 결과처럼 콘텐츠의 크기만큼 늘어난 것을 볼 수 있다.

여기서 동시에 width:200px을 적용했을 때 결과는 콘텐츠의 크기만큼 늘어나는 것이 아닌 아래의 이미지처럼 '200px'이 적용이 되고 콘텐츠가 영역의 밖으로 나가버린다.

공식문서에 따르면, flex-basis와 width/height가 적용이 될 때는 우선적으로 flex-basis를 적용한다고 하는데 바로 위의 이미지를 보면 width가 "200px"로 고정되어 콘텐츠가 요소의 영역 밖으로 나가버린다.

이 부분에 대해서 아직 이해가 안되는 부분이 있어서 추후에 알아보고 내용을 추가하도록 하겠다.

- flex-grow

flex-basis의 값에서 더 늘어나도 되는지 지정하는 속성이다. 속성의 0보다 값으로는 음수값은 허용되지 않는다.

flex-grow의 특징은 컨테이너의 사용가능한 영역을 어떤 비율로 가질 것인지 정할 수 있다는 것이다.

예제를 보자.
현재 아래의 이미지는 컨테이너가 1000px이 적용되어 있고 내부의 요소에는 콘텐츠만큼의 영역만 차지하고 있다.

그래서 콘텐츠를 제외한 나머지 영역은 사용가능한 영역이다.
즉, "내부 요소가 나누어 가질 영역"이라는 것이다.

<style>
.box1 {
        flex-grow: 1;
        background-color: lightcoral;
      }
      .box2 {
        background-color: lightsalmon;
      }
      .box3 {
        background-color: lightskyblue;
      }
</style>

우선 내가 이해한 바로는 flex-grow가 지정된 요소들만 컨테이너 요소의 여백 공간을 나눠가지는 것으로 이해했다.

그래서 위의 소스코드처럼 요소 중 첫번째 요소 혼자 flex-grow를 가지고 있으면 아래의 결과처럼 혼자 컨테이너의 여백 공간을 다 차지하는 것을 볼 수 있다.

이제 다른 요소에도 flex-grow를 넣어보도록 하자.

<style>
.box1 {
        flex-grow: 1;
        background-color: lightcoral;
      }
      .box2 {
      	flex-grow: 2;
        background-color: lightsalmon;
      }
      .box3 {
      	flex-grow: 1;
        background-color: lightskyblue;
      }
</style>

위의 소스코드의 의미는 box1은 컨테이너 영역의 4분의 1을 차지, box2는 4분의 2를 차지, box3은 4분의 1을 차지는 것이다.

여기서 이해해야하는 점은 요소의 추가된 여백공간의 구분을 잘해야한다.
여백공간은 요소의 전체의 크기가 아닌 아래의 점선으로 된 사각형처럼 여백만 추가된다는 것을 알고 있어야 한다.

정확히 여백이 비율에 맞게 들어갔는지 계산을 한번 해보도록 하자.
우선 임의로 박스에 width:100px을 줘서 전체 너비의 -100px을 하면 전체 여백이 나올 것이다.

• box1 : 351.25 - 100 = 251.25px

• box2 : 602.5 - 100 = 502.5px

• box3 : 351.25 - 100 = 251.25px

결과적으로 251.25 : 502.5 : 251.25로 1:2:1 비율로 맞게 여백 공간이 들어간 것을 볼 수 있다.

- flex-shrink

flex-shrink는 flex-grow와 반대의 개념으로 flex-basis의 값에서 줄어들어도 되는지에 대한 속성이다. 모든 컨테이너 내부의 박스 요소의 기본값은 "1"이다.

아래의 소스코드는 모든 내부 요소에 flex-basis를 이용하여 초기의 크기를 정해주고 flex-shrink의 영향으로 어떻게 줄어드는지 보여주는 예제이다.

<style>
.container div {
        flex-basis: 100px;
        height: 200px;
      }

      .box1 {
        flex-grow: 1;
        flex-shrink: 0;
        background-color: lightcoral;
      }
      .box2 {
        flex-grow: 2;
        flex-shrink: 1;
        background-color: lightsalmon;
      }
      .box3 {
        flex-grow: 1;
        flex-shrink: 1;
        background-color: lightskyblue;
      }
</style>

한번 화면의 크기를 줄여보도록 하자.

flex-shrink:0을 적용시킨 첫번째 박스는 flex-basis로 설정한 초기 박스의 크기인 100px를 화면이 줄어도 줄어들지 않는다.

그외의 flex-grow:2를 적용시킨 가장 큰 두번째 박스는 flex-grow:1을 적용시킨 세번째 박스보다 빠른 속도로 줄어들고 있는 것을 볼 수 있다.

즉, flex-shrink:0은 flex-basis에서 설정한 값을 화면이 줄어들어도 고정하는 것이고 flex-shrink가 1이상 일시엔 줄어드는 것으로 볼 수 있겠다.

- 축약형 flex 속성

위에서 정리한 세 속성을 한번에 작성할 수 있는 축약형 속성인 flex이다.

flex: <flex-grow> <flex-shrink> <flex-basis>

축약형의 규칙은 MDN에 있는 아래의 이미지처럼 작성해야한다.

예를 들면,

flex: 1이면 flex-grow만 1이 적용되어 flex-grow:1, 나머지 속성은 기본값으로 flex-shrink:1, flex-basis: auto가 된다.

flex: 1 2이라면 flex-grow:1, flex-shrink:2, flex-basis: auto가 된다.

flex: 1 200px이라면 flex-grow:1, 기본값인 flex-shrink:1, flex-basis:200px이 된다. 200px처럼 단위가 있는 length를 나타내는 수치는 flex-basis의 속성값으로 적용이 된다.

flex: 1 2 200px이라면 flex-grow:1, flex-shrink:2, flex-basis:200px이 된다.

- align-self

이런 상황이 올 수도 있다. display:flex를 적용시킨 상태에서 다른 요소말고 지정한 요소에만 다른 flex속성값을 주고 싶을 때, 그때 사용하는 속성이 align-self이다.

그리고 중요한 점은 align이기 때문에 align-items처럼 Cross-axis를 기준으로 하는 것을 알 수 있다.

align-self는 align-items의 속성값을 모두 사용할 수 있다.

5개의 컨테이너 내부 요소에 각각 다른 속성값을 한번씩 사용해서 결과를 보도록 하자.

위의 이미지를 보면 각각 적용한 값에 따라 요소의 결과가 다른 것을 볼 수 있다.
클래스를 설정해서 복수의 요소에 적용할 수도 있다.

5개의 박스 요소 중 .selected라는 클래스를 설정하여 3번째와 4번째 박스 요소를 지정해서 적용해보았다.

.selected {
        align-self: center;
      }

<div class="container">
      <div class="box1">box1</div>
      <div class="box2">box2</div>
      <div class="box3 selected">box3</div>
      <div class="box4 selected">box4</div>
      <div class="box5">box5</div>
</div>

여러모로 레이아웃을 구성할때 활용하면 좋을 것 같다.

- order

order은 내부 요소간의 정렬의 순서를 바꿀 수 있는 속성이다.

내부 요소에 order 속성을 적용시킨다.

<style>
.box1 {
        order: 3;
        background-color: lightcoral;
      }
      .box2 {
        order: 4;
        background-color: lightsalmon;
      }

      .box3 {
        order: 5;
        background-color: lightskyblue;
      }

      .box4 {
        order: 1;
        background-color: lightgreen;
      }

      .box5 {
        order: 2;
        background-color: lightseagreen;
      }
</style>

위의 이미지를 보면 order에 따라 순서가 바뀐 것을 볼 수 있다.
당연히 flex-direction이 *-reverse라면 반대의 순서로 정렬이 될 것이다.

정리를 마치며 ⛳️

flex를 사용하면서 잘 사용하지 않았던 속성이기에 정보를 검색해보고 실습을 해보고 오랜 시간이 걸렸다.
아직도 이해하지 못한 속성이 있어 꾸준히 다시 봐야할 것 같다 .
물론 사용하지 않을 경우가 더 많지만 내가 확실히 안다면 활용할 수 있는 범위도 더 늘어날테니까..!

벌써 주말이 끝났다. TIL를 쓰면 하루가 어떻게 그렇게 빨리가는지.. 열심히 공부하고 있다는 증거이겠지 라는 생각에 다음 주도 열심히 하자라는 다짐을 하게 된다.

다음 주도 화이팅이다! 💪