[CSS] KUCC JS 세션: 2. CSS flexbox - (2)아이템에 적용하는 속성

이 글은 아래 글을 인용합니다. 원글이 그림도 더 친절하고 설명도 잘 되어 있으니 링크 타고 보시는 것을 추천합니다 

 

출처: https://studiomeal.com/archives/197

이번에야말로 CSS Flex를 익혀보자

 

아이템에 적용하는 속성들

1. 유연한 박스의 기본 영역
flex-basis

flex-basis는 Flex 아이템의 기본 크기(즉 최소크기) 를 설정합니다

최소크기보다 큰 item은 그대로, 작은 item은 최소크기만큼 큰다

(flex-direction이 row일 때는 너비, column일 때는 높이).

.item {

    flex-basis: auto;  /* 기본값 */

  /* flex-basis: 0; */

 /* flex-basis: 50%; */

 /* flex-basis: 300px; */

 /* flex-basis: 10rem; */

 /* flex-basis: content; */

 }

 

flex-basis의 값으로는 우리가 width, height 등에 사용하는 각종 단위의 수가 들어갈 수 있다. 

- 기본값 auto는 해당 아이템의 width값을 사용합니다. width를 따로 설정하지 않으면 컨텐츠의 크기가 되겠지요.

- content는 컨텐츠의 크기로, width를 따로 설정하지 않은 경우와 같아요. 

 

2.유연하게 늘리기
flex-grow

*flex-basis가 없으면 container 전체에 대해 item들이 차지 하지 않는 여백을 비율로 나눈다 

 

flex-grow는 아이템이 flex-basis의 값보다 커질 수 있는지를 결정하는 속성.

즉 flex-basis을 제외한 여백 부분을 flex-grow에 지정된 숫자의 비율로 나누어 가지는 것. 

flex-basis가 최소 크기이므로 모든 item은 일단 이만큼을 가지고 남은 부분에 대해 grow의 숫자값만큼씩 가져간다 

=> 그러므로 각 item마다 다르게 비율을 적용할 수 있다 

- flex-grow에는 숫자값이 들어가는데, 기본값이 0이다. 그러므로 flex-basis로 가지고 남은 여백을 냅둔다. 

- 기본값이 0보다 큰 값이 세팅이 되면 해당 아이템이 유연한(Flexible) 박스로 변하고 원래의 크기보다 커지며

flex-basis로 쓰고 남은 빈 공간을 메우게 됩니다.

 

/* 1:2:1의 비율로 세팅할 경우 */

.item:nth-child(1) { flex-grow: 1; }

.item:nth-child(2) { flex-grow: 2; }

.item:nth-child(3) { flex-grow: 1; }

 

각 아이템의 컨텐츠가 “AAAAA”, “B”, “CCC”로 원래의 크기가 다르기 때문에 전체 아이템의 크기가 살짝 애매한 비율로 보이지만, 여백의 비로 생각해 보면 정확히 1:2:1이죠!
정수 뿐 아니라 3.141592같은 소수도 가능합니다.

3. 유연하게 줄이기
flex-shrink

flex-shrink는 flex-grow와 쌍을 이루는 속성으로, 아이템이 flex-basis의 값보다 작아질 수 있는지를 결정

flex-shrink에는 숫자값이 들어가는데, 0보다 큰 값이 세팅이 되면 해당 아이템이 유연한(Flexible) 박스로 변하고

container의 크기가 작아지면 flex-basis보다 작아집니다.
기본값이 1이기 때문에 따로 세팅하지 않았어도 아이템이 flex-basis보다 작아질 수 있었습니다.

.item {

     flex-basis: 150px;

     flex-shrink: 1; /* 기본값 */

 }

flex-shrink를 0으로 세팅하면 아이템의 크기가 flex-basis보다 작아지지 않기 때문에

고정폭의 컬럼을 쉽게 만들 수 있어요. 고정 크기는 width로 설정합니다.

 

컨테이너의 폭을 100%와 250px로 왔다리갔다리했을 때 

flex-shrink: 0; 이 있으면 컨테이너가 아무리 작아져도 첫번째 아이템은 찌그러지지 않고 폭이 100px로 유지된다.

4. flex

flex-grow, flex-shrink, flex-basis를 한 번에 쓸 수 있는 축약형 속성입니다.
이 세 속성들은 서로 관련이 깊기 때문에, 이 축약형을 쓰는 편이 여러모로 편리합니다.

.item { flex: 1;

         /* flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */  => grow: 1씩 비율 가져가기, shrink: 기본값, basis: 없음 

                                                                       => 전체 1씩 가져간다 

         flex: 1 1 auto;

         /* flex-grow: 1; flex-shrink: 1; flex-basis: auto; */

                   => flex-basis: item의 width만큼(안 정해져있으면 그 안 element의 width)  

         flex: 1 500px;

         /* flex-grow: 1; flex-shrink: 1; flex-basis: 500px; */

                   => 최소 500은 되어야 하고 grow는 1씩, shrink은 기본값

}

주의할 점은, flex: 1; 이런 식으로 flex-basis를 생략해서 쓰면 flex-basis의 값은 0이 됩니다.

축약형 flex로 좀 더 예시를 들어 볼게요.

.item { flex: 1 1 0; }  => 전체에게 1씩 (grow)

.item: nth-child(2) { flex: 2 1 0; } => 2번째만 2씩

 

flex-basis: 0; 으로, 기본 점유 크기를 0으로 만들어버려 결국 전체 크기를 1:2:1로 나누어 가져서,

영역 자체의 크기가 정확히 1:2:1의 비율로 설정되었습니다.
여백의 비가 아닌, 영역 자체를 원하는 비율로 분할하기를 원한다면 이렇게 flex-basis을 0으로 하면

손쉽게 처리할 수 있어요.

 

[2단 컬럼의 사각형 목록을 만들기] 

: flex-wrap과 flex-basis 이용 

.container {

                 display: flex;

                 flex-wrap: wrap;

               }

 

.item {

           flex: 1 1 40%;

        }

flex-basis가 40%면, 100%에는 2개까지만 들어가므로 하나의 row에는 2개까지만 남고 다음줄로 넘어가게 되어서

2단 컬럼이 유지가 됩니다. ( flex-grow: 1 그러므로 같은 비율, flex-shrink: 1(기본값) ) 

 

 

5. 수직축으로 아이템 정렬
align-self

align: 수직축 정렬

align-items가 전체 아이템의 수직축 방향 정렬이라면,

align-self는 해당 아이템의 수직축 방향 정렬입니다. (하나씩)

.item {

           align-self: auto;

           /* align-self: stretch; */

           /* align-self: flex-start; */

           /* align-self: flex-end; */

           /* align-self: center; */

           /* align-self: baseline; */

         }

 

- 기본값은 auto로, 기본적으로 align-items 설정을 상속 받는다
- align-self는 align-items보다 우선권이 있다

    => 전체 설정보다 각각의 개별 설정이 우선한다

- auto 외의 나머지 값들은 align-items와 동일

 

 

6. 배치 순서
order

각 아이템들의 시각적 나열 순서를 결정하는 속성이예요.
숫자값이 들어가며, 작은 숫자일 수록 먼저 배치됩니다.

그러므로 초기값 0인 것보다 더 앞으로 가고 싶으면 -1을 배정하면 된다

하나만 바꾸면 해당 순서의 아이템과 위치가 교환된다. 

“시각적” 순서일 뿐, HTML 자체의 구조를 바꾸는 것은 아니므로 접근성 측면에서 사용에 주의하셔야 합니다.

시각 장애인분들이 사용하는 스크린 리더로 화면을 읽을 때, order를 이용해 순서를 바꾼 것은 의미가 없다는 것을 기억해 주세요.

.item:nth-child(1) { order: 3; } /* A */

.item:nth-child(2) { order: 1; } /* B */

.item:nth-child(3) { order: 2; } /* C */

 

7. z-index

z-index로 Z축 정렬을 할 수 있어요.

숫자가 클 수록 위로 올라옵니다.
(position에서의 z-index랑 똑같이 생각하시면 됩니다.)

.item:nth-child(2) {

              z-index: 1;

              transform: scale(2);

 }

 

/* z-index를 설정 안하면 0이므로, 1만 설정해도 나머지 아이템을 보다 위로 올라온다 */