박코딩

박코딩

공부기록 블로그

레이아웃_3

2 minute read

레이아웃

정보를 정리해서 일관된 모습으로 보여지도록 하는 것은 디자인에서 매우 중요한 주제이다.

구획을 나누고 적절히 정보를 배치하는 것을 레이아웃(layout)이라고 한다.


flex

요소들의 크기나 위치를 쉽게 잡아주는 도구이다.

사용하기 위해서 기본적으로 알고가야할 개념이있다.

<container>
    <item></item>
    <item></item>
</container>

정렬 대상이되는 요소 item들을 container로 묶어서 사용한다.

container와 item마다 사용할 속성이 정해져잇다.

container

  • display

  • flex-direction

  • flex-wrap

  • flex-flow

  • justify-content

  • align-items

  • align-content

item

  • order

  • flex-grow

  • flex-shrink

  • flex-basis

  • flex

  • align-self


<!DOCTYPE html>
<html>
  <head>
    <style>
      .container{
        background-color: powderblue;
        height: 200px;
        display: flex;
        flex-direction: column-reverse;
      }
      .item{
        background-color: tomato;
        color:white;
        border:1px solid white;
        flex-grow:1;
      }
      .item:nth-child(2){
        flex-basis:200px;
        flex-grow:2;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
    </div>
  </body>
</html>

부모의 속성에 display를 flex로 하면 사용할 수 있다.

flex는 정렬에 용이한 속성이기 때문에 관련해서 다양한 기능들이 있다.

container

  • flex-direction

    정렬 방향을 정한다. row와 column으로 정렬할 수 있으며 reverse로 각 방향을 뒤집을 수 있다.

    기본값은 row이며 왼쪽에서 부터 순서대로 정렬된다.

item

  • flex-basis

    정렬 방향으로 요소의 크기를 조절한다.

  • flex-grow

    값을 1로 주면 부모의 크기를 자식들이 나누어 가져서 공간을 꽉 채운다. (부모의 크기를 1 / 자식의 수)

    하나의 자식에게 개별적으로 값을 더 주게 되면 총 값으로 부모를 나누고 분배할 때 값 만큼 나누어 가진다.

  • flex-shrink;

    <!DOCTYPE html>
<html>
  <head>
    <style>
      .container{
        background-color: powderblue;
        height: 200px;
        display: flex;
        flex-direction: row;
      }
      .item{
        background-color: tomato;
        color:white;
        border:1px solid white;
      }
      .item:nth-child(1){
        flex-basis:150px;
        flex-shrink:0;
      }
      .item:nth-child(2){
        flex-basis:150px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
    </div>
  </body>
</html>

    창이 컨텐츠의 크기보다 작아질 때 flex로 정렬된 컨텐츠는 부피를 줄이면서 모두 표시되지만 shrink값이 0으로 지정되면 줄어들지 않게 된다.

    shrink에 할당된 값만큼 줄어드는 크기를 분담하게 된다.


성배 레이아웃

holy grail layout

holy_grail_layout

성배처럼 많은 사람들이 만들기 위해 노력했지만 완벽한 방법을 찾지 못한 레이아웃 구조였다. 하지만 flex는 아주 세련된 방법으로 이 문제를 간편하게 해결한다.

See the Pen Untitled by Bakcoding (@bakcoding) on CodePen.



기타 속성들

  • 컨테이너 속성

    flex-wrap

    아이템이 컨테이너의 크기보다 크다면 줄바꿈이 일어난다. 리버스시 역순으로 정렬된다.

    align-items

    수직으로 정렬한다.

    • stretch

      기본값으로 아이템 크기는 컨테이너의 높이값과 같다.

    • flex-start

      컨테이너의 시작에서부터 아이템들이 컨텐츠 크기로 정렬된다.

    • flex-end

      컨테이너의 끝에서부터 아이템들이 컨텐츠 크기로 정렬된다.

    • center

      아이템들이 컨텐츠 크기로 컨테이너 중심에 정렬된다.

    • baseline

      아이템의 컨텐츠에 줄을 맞춰 정렬된다.

    justify-content

    수평으로 정렬한다.

    • flex-start

      컨테이너의 시작에서부터 아이템들이 정렬된다.

    • flex-end

      컨테이너의 끝에서부터 아이템들이 정렬된다.

    • space-between

      아이템과 컨테이너의 경계면 사이에 빈 공간이 없이 균등하게 정렬한다.

    • center

      아이템들을 컨테이너 중심에 정렬한다.

    • space-around

      아이템과 컨테이너의 경계면에 공간을 두고 균등하게 정렬시킨다.

    align-content

    align-items와 비슷하지만 같은 행의 아이템들을 그룹으로 만들어 정렬한다.

  • 아이템 속성

    align-self

    특정한 아이템만 정렬시킨다.

    flex

    여러가지를 축약해서 사용할 수 있다.

    .item {flex: flex-grow [flex-shrink] [flex-basis]; }

    order

    아이템의 순서를 바꾼다.

See the Pen Untitled by Bakcoding (@bakcoding) on CodePen.


You may also enjoy