Flexbox 제대로 활용하기 (flex-grow, flex-shrink, flex-wrap etc)

Flexbox Froggy

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

1분 코딩에서 아주 잘 알려주고 있다. 나도 이번 기회에 Flex를 다시 배웠다. 이미 알고 있었던 내용을 제외하고 새로 배웠던 내용만 정리해보자.

 

일단 자주 사용하는 속성을 전부 적어봤다.

.container {
    // 기본적인 설정
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    // wrap과 wrap 되었을 때의 간격
    flex-wrap: wrap;
    align-content: center;
    
    // flex-direction과 flex-wrap의 줄임 표시
    flex-flow: row wrap;
    
}

.item {
    // flex 삼총사들
    flex-basis: 30%;
    flex-grow: 1;
    flex-shrink: 1;
    flex: 1 1 30%;
    
    // 순서 (기본값 0)
    order: 1;
    
    // 아이템의 align-items 개별 조절
    align-self: center;
}

 

 

---

 

flex-container(부모 요소)에 적용하는 속성들

 

flex-wrap

만약 주어진 아이템들이 주어진 wrapper의 가로 길이를 넘칠 때, 아무 설정을 하지 않으면 아이템들이 쪼그라 든다. 이는 flex-wrap: nowrap이 기본값이기 때문이다.

 

flex-wrap: wrap;

 

 

 

align-content

 

justify-content(메인축)과 align-items(아이템 정렬)만 사용했었는데 align-content의 사용법을 알게 되었다.

flex-wrap: wrap;이 설정된 상태에서, 아이템들의 행이 2줄 이상 되었을 때의 수직축 방향 정렬을 결정하는 속성입니다. default는 stretch입니다.

.flex-contaier {
  align-content: space-around;
}

 

왼쪽은 align-content 가 기본일 때, 오른쪽은 space-around일 때 입니다.

 

flex-flow

 

flex-direction 과 flex-wrap을 동시에 설정한다. 단순히 편리해서 사용하는 속성

 

.flex-contaier {
  flex-flow: row wrap;
}

 

 

flex-item(자식 요소)에 적용하는 속성들

 

(flex 삼총사) flex-basis

아이템의 기본 크기를 지정합니다. flex-grow나 shrink로 늘어나거나 줄어들기 전의 기본 크기를 설정합니다.

flex-direction이 row라면 basis는 가로, column이면 세로를 의미합니다.

 

어디까지나 기본 크기기 때문에 이 크기보다 큰 아이템들은 자신들의 크기를 유지합니다. 강제로 width, height를 주면 강제로 해당 크기를 유지하기 때문에 flex-basis와는 차이가 있습니다.

 

flex-basis는 Flex 아이템의 기본 크기를 설정합니다(flex-direction이 row일 때는 너비, column일 때는 높이).

.flex-item {
  flex-basis: 150px;
}

 

 

 

(flex 삼총사) flex-grow

 

아이템이 기본값을 넘어 넓어질 수 있는 지를 설정함. 1만 줘도 화면 끝까지 꽉 채운다. 아이템을 화면에 꽉 채우는 데 유용하다.  1이면 늘어나고 0이면 안 늘어난다.

 

대개 warp으로 넘쳐서 삐져나온 한 아이템의 크기가 화면 끝까지 늘어나게 할 것인지 고유한 크기를 유지하게 할 것인지를 결정하는데 사용한다.

 

숫자를 이용해 아이템의 여백의 비율을 조정할수도 있다. (아이템 크기의 비율이 아님에 주의)

.box:nth-child(2) {
    background: lightblue;
    flex-grow: 1;
}

 

1 이상의 값을 줌으로써 늘어나는 비율을 설정할 수도 있다.

.box:nth-child(2) {
    background: lightblue;
    flex-grow: 1;
}

.box:nth-child(3) {
    background: lightyellow;
    flex-grow: 2;
}

 

 

 

 

 

(flex 삼총사) flex-shrink

 

flex에서 아이템은 width값을 주어도, 화면이 줄어들면 width를 무시하고 줄어든다.

브라우저 가로 길이를 줄이면 박스가 알아서 줄어드는 것을 확인할 수 있다.

이는 flex-shink의 기본값이 '1' 줆어듦이기 때문이다.

 

 

 

크기를 유지하고 싶을 때는 0을 사용한다.

.box:nth-child(2) {
    background: lightblue;
    flex-shrink: 0;
}

다른 건 줄어들어도 flex-shrink를 0으로 준 두번째 아이템을 줄어들지 않은 것을 확인할 수 있다.

 

 

.box:nth-child(2) {
    background: lightblue;
    flex-shrink: 2;
}

기본값이 1이므로 2, 3 등 특정값을 주면 줄어드는 비율이 늘어납니다. 2로 설정한 결과 줄어든 비율이 2배가 된 것을 볼 수 있습니다.

 

 

 

★ flex

위 세 속성을 배운 것은 flex 속성을 사용하기 위함이었다. flex는 flex-grow, flex-shrink, flex-basis 순으로 작성한다. 이 세 속성은 서로 관련성이 있기 대문에 대개 flex라는 축약형으로 사용한다. 주의할 점은 flex-basis를 생략하면 auto가 아니라 값이 0으로 설정되며 flex-shrink를 생략하면 1(줄어듦)으로 설정 된다는 것이다.

.flex-item {
	flex: 1 1 40%;
    /* grow 1(늘어남), shrink 1(줄어듦), 기본 크기 40%*/
}

.flex-item {
	width: 50px
	flex: 1 1 auto;
    /* grow 1(늘어남), shrink 1(줄어듦), 기본 크기 auto(50px)*/
}

다음과 같이 사용하면 브라우저의 크기에 상관없이 세 아이템의 크기의 비율을 1:2:1로 유지할 수 있다. 물론 내용물이 너무 많으면 깨진다. 내용물에 상관없이 비율을 유지하고 싶으면 width:25%, 50% 25%로 주면 된다. 

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

 

 

align-self, order

둘다 개별적인 아이템들을 다루는 속성이라서 같이 다뤄보도록하자.

align-items이 flex-container에 적어서 전체 아이템을 대상으로 하는 속성이라면

algin-self는 각 flex-item에 개별적으로 영향력을 미치는 속성이다.

당연히 align-items보다 우선적으로 적용된다.

.wrapper {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 50vh;
    border: 1px solid black;
}

.box {
    background: lightcoral;
    width: 100px;
    height: 100px;
    display: inline-block;
}

.box:nth-child(2) {
    align-self: flex-end;
}

.box:nth-child(3) {
    align-self: flex-start;
}

 

2번째 대상, 3번째 대상에 align self로 값을 적용한 결과 다음과 같이 되었다.

 

 

 

한편, order는 아이템들의 순서를 결정한다. 다만 HTML 구조를 바꾸는 건 아니다.

기본적으로 flex 아이템들은 order가 0이다.  order가 작은 순서대로 왼쪽부터 배치된다.

아래의 경우 2번째 박스에는 아무 값 주지 않았으니 0이고, 맨 왼쪽에 배치된다.

.box:nth-child(1) {
    order: 2;
}

.box:nth-child(2) {
    align-self: flex-end;
}

.box:nth-child(3) {
    align-self: flex-start;
    order: 3;
}

 

 

 

잠깐 tip) margin: auto 활용

각 아이템을 order나 align-self 외에 margin을 이용해서 정렬할 수도 있다.

아래와 같은 코드는 세번째 아이템의 왼쪽을 전부 다 쓴다

.flex-item:nth-child(3) {
  margin-left: auto;
}

 

flex-container에 widh를 준 후 margin값을 다음과 같이 활용하면 가운데 정렬도 할 수 있다.

.flex-container {
  width: 550px;
margin: 0px auto;
display: flex;
}
.flex-item:nth-child(3) {
  margin-left: auto;
}