• Flexbox 기본 다지기 2 :: 마이구미
    HTML, CSS 2019. 3. 23. 23:56
    반응형

    아주 오래전에 Flexbox 에 대한 아주 기본적인 내용을 다뤘다.

    이번 글은 크게 flex-wrap 과 flex(flex-grow, flex-shrink, flex-basis) 속성 사용법을 알아본다.

    Flexbox 에 있어서는, 가장 중요한 핵심인 주축과 교차축의 이해가 필요하기 때문에, 아래 글을 먼저 참고하면 좋다.

    flex-direction 의 값을 사용한다면, 주축과 교차축을 바뀐다는 것을 인지하고 있어야한다.

    또한, flexBox 를 다룰 때에는 관련된 속성들의 디폴트 값을 이해할 필요가 있다.

    Flexbox 기본 1 - https://mygumi.tistory.com/237


    이미지리스트에 대한 예제를 단계별로 진행하면서 Flexbox 의 활용하는 방법을 다뤄본다.

    우선 첫번째 예제를 작성해본다.


    1. flex 속성을 가지는 컨테이너가 존재하고, 너비는 70% 이다.
    2. 컨테이너 안에는 이미지 4개를 배치한다.
    3. 각 이미지는 컨테이너의 너비의 30%의 너비를 갖는다.


    <div class="container">

    <img/>

    <img/>

    <img/>

    <img/>

    </div>


    .container {

    display: flex;

    width: 70%;

    img {

    width: 30%;

    height: 100%;

    }

    }


    위와 같은 코드 형태가 작성될 것이다.

    실제 코드는 다음과 같다.


    See the Pen 1. need flex-wrap by leejunghyun (@mygumi) on CodePen.


    보다시피, 컨테이너의 너비(70%)보다 이미지 전체의 너비(30% * 4)가 크기 때문에, 범위를 벗어나는 모습을 볼 수 있다.

    만약 컨테이너의 속성이 flex 가 아니였다면, 세 개의 이미지가 동일한 줄에 배치되고, 나머지 하나의 이미지는 벗어나지 않고, 다음 줄로 내려가서 배치되었을 것이다.


    flexbox


    우리가 원하는 것은 컨테이너 영역인 흰색에만 배치되길 원한다.

    이 경우, flex-wrap 속성을 사용하여 해결할 수 있다.

    flex-wrap 속성은 자신에게 속한 flex-item 요소들을 가능한 영역 내에 배치할 수 있게 여러 행으로 나누어줄 수 있다.

    이 속성의 디폴트 값이 "nowrap" 이라서 강제로 한줄에 배치되어, 위처럼 영역을 벗어나는 결과를 내게 된다.


    .container {

    display: flex;

    flex-wrap: wrap;

    }


    flex-wrap: wrap 를 추가한 결과, 다음 행에 배치된 모습을 볼 수 있다.

    그리고 조금 더 나아가, 같은 컨테이너를 더 만들어보자.

    결과적으로는 다음과 같다.


    1. flex 속성을 가지는 컨테이너가 존재하고, 너비는 70% 이다.
    2. 컨테이너 안에는 이미지 n개를 배치한다.
    3. 각 이미지는 컨테이너의 너비의 30%의 너비를 갖는다.
    4. 이미지 갯수를 n = n - 1 해서 1번으로 돌아가서 컨테이너를 만든다.


    총 컨테이너는 4개가 존재하고, 각 컨테이너에는 이미지 갯수가 4, 3, 2, 1 개를 가지고 있다.

    flex-wrap 속성과 컨테이너를 늘린 예제는 다음과 같다.


    See the Pen 2. apply flex-wrap, need flex: 1 by leejunghyun (@mygumi) on CodePen.


    위 코드로 나타내는 결과물은 아쉬운 부분들이 많이 존재한다.

    좌우 여백이 일정하지 않고, 각 행의 공백또한 일정하지 않다.


    flexbox


    이 문제는 flex-grow 속성을 통해 해결 가능하다.

    flex-grow 속성은 flex-item 요소가 내부 할당 가능한 공간의 정도를 지정한다.

    동일한 값을 가진다면, 동일한 공간을 가지게 된다.

    그로인해, 각 빈 공간들은 채워지게되고, 한개의 이미지만 같은 행에서도 공간을 채우기 위해 너

    초기값은 0으로써, 위와 같은 상황에서는 0이 아닌, 어떤 양수를 넣든 우리가 원하는 결과를 낼 수 있다.


    flex-grow: 1;


    flex-grow 는 flex-shrink 와 flex-basis 과 함께 사용된다.

    flex-shrink 는 flex-item 의 너비가 컨테이너보다 클 경우를 위해 축소해주고, flex-basis 는 기본 크기(width, height) 를 지정한다. 

    크기의 종류는 flex-direction 에 따라 달라진다.


    대부분 위 3개의 속성을 선언했음을 보장하기 위해 축약형인 flex 속성을 사용한다.


    flex: 1 1 0; // flex-grow: 1, flex-shrink: 1, flex-basis: 0


    자세한 건 MDN 문서를 참고하길 바란다. (https://developer.mozilla.org/ko/docs/Web/CSS/flex-grow)

    최종적인 코드와 결과물은 다음과 같다.


    See the Pen 3. apply flex: 1 by leejunghyun (@mygumi) on CodePen.


    반응형

    댓글 0

Designed by Tistory.