flex의 gap

Css

flex의 gap

Urime 2023. 12. 15. 09:09

📘 gap

- 아이템 간의 거리를 설정하는 속성

- justify-content보다 구체적으로 설정할 수 있다.

- px, rem/em, %등 모든 단위로 설정 가능하다.

 /* 모든 면에 동일하게 적용 */
.flex-wrap {display: flex; gap: 10px;}

/* 위아래, 좌우 */
.flex-wrap {display: flex; gap: 2% 10rem;}

적용 예시 코드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flex의 gap 사용하기</title>
  <link rel="stylesheet" href="/css/reset.css">
  <style>
     body {text-align: center; background-color: #eee; font-size: 10px;}
     h1 {margin-top: 10rem; font-size: 2rem;}
     .container { margin: 0 auto; max-width: 1200px; padding: 1rem; background-color: #fff;
       border: 1px solid #ccc;}
     .flex-wrap {display: flex; flex-wrap: wrap; gap: 10px 5%;}
     .obj {width: 10rem; height: 10rem; display: block;}
     .obj:nth-child(1),.obj:nth-child(8) {background-color: #f57fb0;}
     .obj:nth-child(2),.obj:nth-child(9) {background-color: #fdaa57;}
     .obj:nth-child(3),.obj:nth-child(10) {background-color: #fbd65c;}
     .obj:nth-child(4),.obj:nth-child(11) {background-color: #b5e868;}
     .obj:nth-child(5),.obj:nth-child(12) {background-color: #7deed8;}
     .obj:nth-child(6),.obj:nth-child(13) {background-color: #60cff7;}
     .obj:nth-child(7),.obj:nth-child(14) {background-color: #7e8ffb;}
  </style>
</head>
<body>
  <h1>flex의 gap 사용하기</h1>
  <div class="container">
    <div class="flex-wrap">
      <div class="obj"></div>
      <div class="obj"></div>
      <div class="obj"></div>
      <div class="obj"></div>
      <div class="obj"></div>
      <div class="obj"></div>
      <div class="obj"></div>
      <div class="obj"></div>
      <div class="obj"></div>
      <div class="obj"></div>
      <div class="obj"></div>
      <div class="obj"></div>
    </div>
  </div>
</body>
</html>

결과

See the Pen Untitled by yurim99 (@yurim99) on CodePen.