๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
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.

 

 

 

 

 

'Css' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

cubic-bezier  (1) 2023.12.21
Css๋กœ ์• ๋‹ˆ๋ฉ”์ด์…˜ ๊ตฌํ˜„ํ•˜๊ธฐ  (1) 2023.12.20
media qurey ๋ฐ˜์‘ํ˜•  (0) 2023.12.15
Css ํฐํŠธ ์ ์šฉ ๋ฐฉ๋ฒ•๊ณผ ์ข…๋ฅ˜  (0) 2023.12.12
<li>ํƒœ๊ทธ marker ์ œ๊ฑฐํ•˜๊ธฐ  (0) 2023.10.13

'Css' Related Articles

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”