[CSS] flex layout에 대한 이해


이번에는 flex box에 대하여 알아보도록 하겠습니다.

  1. display: flex
  2. justify-content
  3. align-items
  4. align-content
  5. 복합적으로 사용하기

해당 포스트의 내용을 접하기 이전에 다음 flex froggy 게임을 플레이해주세요. flex에 대한 이해도가 굉장히 좋아집니다. 물론 해당 포스트를 읽은 다음에 해도 무방합니다.

바로가기 : https://flexboxfroggy.com/#ko

display: flex

flex의 개념은 굉장히 간단합니다. 가로로 나열할 요소의 부모에다가 flex를 지정하기만 하면 됩니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Flex Layout</title>
  <style>
    .flex{display:flex;}
    .flex>div{width:100px;height:100px;}
    .box1{background:#ffa;}
    .box2{background:#faa;}
    .box3{background:#afa;}
    .box4{background:#aaf;}
  </style>
</head>
<body>
  <div class="flex">
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <div class="box3">box3</div>
    <div class="box4">box4</div>
  </div>
</body>
</html>

float처럼 clear를 신경쓰지 않아도 되며, inline-block처럼 공백 문자를 신경쓸 필요도 없습니다. 무엇보다 좋은 점은 레이아웃에 대한 정렬을 자유롭게 할 수 있다는 점입니다.

display:flex를 지정하면 justify-content, align-items, align-content 등의 속성을 함께 사용할 수 있습니다.


justify-content

justify-content는 flex 요소들의 가로 정렬을 해줍니다.

  1. flex-start : 왼쪽 정렬
  2. flex-end : 오른쪽 정렬
  3. center : 가운데 정렬
  4. space-between : 모든 요소의 좌우 여백이 동일하게
  5. space-around : 모든 요소의 간격을 동일하게
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Flex Layout</title>
  <style>
    .flex{display:flex;width:500px;border:1px solid #000;}
    .flex.start{justify-content:flex-start;}
    .flex.end{justify-content:flex-end;}
    .flex.center{justify-content:center;}
    .flex.around{justify-content:space-around;}
    .flex.between{justify-content:space-between;}
    .flex>div{width:50px;height:50px;}
    .box1{background:#ffa;}
    .box2{background:#faa;}
    .box3{background:#afa;}
    .box4{background:#aaf;}
  </style>
</head>
<body>
  <div class="flex start">
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
    <div class="box4">4</div>
  </div>
  <div class="flex end">
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
    <div class="box4">4</div>
  </div>
  <div class="flex center">
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
    <div class="box4">4</div>
  </div>
  <div class="flex around">
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
    <div class="box4">4</div>
  </div>
  <div class="flex between">
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
    <div class="box4">4</div>
  </div>
</body>
</html>





align-items

align-items는 한 줄 flex 요소들의 세로 정렬을 담당합니다. 여기서 중요한 것은 "한 줄" 입니다. 여러 줄에는 적용되지 않습니다.

  1. flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다.
  2. flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다.
  3. center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.
  4. baseline: 요소들을 컨테이너의 시작 위치에 정렬합니다.
  5. stretch: 요소들을 컨테이너에 높이에 맞도록 늘립니다. align-items를 지정하지 않으면 저절로 stretch가 적용됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Flex Layout</title>
  <style>
    .flex{display:flex;width:500px;height:100px;border:1px solid #000;}
    .flex.start{align-items:flex-start;}
    .flex.end{align-items:flex-end;}
    .flex.center{align-items:center;}
    .flex.baseline{align-items:baseline;}
    .flex.stretch{align-items:stretch;}
    .flex>div{width:50px;} /* height를 지정하지 않았음 */
    .box1{background:#ffa;}
    .box2{background:#faa;}
    .box3{background:#afa;}
    .box4{background:#aaf;}
  </style>
</head>
<body>
  <div class="flex start">
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
    <div class="box4">4</div>
  </div>
  <div class="flex end">
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
    <div class="box4">4</div>
  </div>
  <div class="flex center">
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
    <div class="box4">4</div>
  </div>
  <div class="flex baseline">
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
    <div class="box4">4</div>
  </div>
  <div class="flex stretch">
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
    <div class="box4">4</div>
  </div>
</body>
</html>





align-content

align-content를 들어가기 이전에, flex-flow 라는 속성에 대해 간단히 다루겠습니다. 원래 display:flex를 작용하여 가로정렬이 되면, 요소들은 자동 줄 바꿈이 되지 않습니다. flex 요소들이 부모의 너비를 초과하게 되면, 저절로 가로너비가 줄어들게 됩니다. 이 때 자동 줄 바꿈이 되도록 설정하려면 flex-flow의 값을 wrap으로 지정하면 됩니다.

본론으로 돌아와서 align-content는 여러 줄 사이의 간격을 지정할 수 있습니다. align-items가 "한 줄에 대한 세로 정렬"이라면, align-content는 "여러 줄에 대한 세로 정렬" 입니다.

  1. flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬합니다.
  2. flex-end: 여러 줄들을 컨테이너의 바닥에 정렬합니다.
  3. center: 여러 줄들을 세로선 상의 가운데에 정렬합니다.
  4. space-between: 여러 줄들 사이에 동일한 간격을 둡니다.
  5. space-around: 여러 줄들 주위에 동일한 간격을 둡니다.
  6. stretch: 여러 줄들을 컨테이너에 맞도록 늘립니다.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Flex Layout</title>
  <style>
    .flex{display:flex;flex-flow:wrap;width:500px;height:100px;border:1px solid #000;justify-content:center;} /* flex-flow:wrap 을 통하여 자동 줄바꿈*/
    .flex.start{align-content:flex-start;}
    .flex.end{align-content:flex-end;}
    .flex.center{align-content:center;}
    .flex.baseline{align-content:baseline;}
    .flex.stretch{align-content:stretch;}
    .flex>div{width:150px;height:20px;}
    .box1{background:#ffa;}
    .box2{background:#faa;}
    .box3{background:#afa;}
    .box4{background:#aaf;}
    .box5{background:#faf;}
    .box6{background:#aff;}
  </style>
</head>
<body>
  <div class="flex start">
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
    <div class="box4">4</div>
    <div class="box5">4</div>
    <div class="box6">4</div>
  </div>
  <div class="flex end">
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
    <div class="box4">4</div>
    <div class="box5">4</div>
    <div class="box6">4</div>
  </div>
  <div class="flex center">
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
    <div class="box4">4</div>
    <div class="box5">4</div>
    <div class="box6">4</div>
  </div>
  <div class="flex baseline">
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
    <div class="box4">4</div>
    <div class="box5">4</div>
    <div class="box6">4</div>
  </div>
  <div class="flex stretch">
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
    <div class="box4">4</div>
    <div class="box5">4</div>
    <div class="box6">4</div>
  </div>
</body>
</html>





복합적으로 사용하기

보통 이러한 속성을 복합적으로 사용할 때 가장 많이 하는 것은 가로 세로를 동시에 가운데로 정렬하는 하는 것입니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Flex Layout</title>
  <style>
    .flex{display:flex;justify-content:center;align-items:center;width:500px;height:500px;border:1px solid #000;}
    .box{width:200px;height:200px;border:1px solid #000;text-align:center;}
  </style>
</head>
<body>
  <div class="flex">
    <div class="box">가로 세로 가운데</div>
  </div>
</body>
</html>

이렇게 flex, justify-content, align-items를 이용하여 쉽게 가로/세로 가운데 정렬을 할 수 있습니다.



참고자료