گپ (gap) در فلکس باکس

گپ (gap)

در CSS، برای تنظیم فاصله بین عناصر داخل یک کانتینر Flexbox، می‌توان از ویژگی gap استفاده کرد. این ویژگی به شما این امکان را می‌دهد که فاصله عمودی و افقی بین عناصر را به راحتی تنظیم کنید.

    .container {
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
      gap: 1rem 2rem;
  }

item-1

item-2

item-3

item-4

item-5

item-6

دستور مربوط به ظرف فلکس بالا در زیر به صورت کامل آورده شده است:

html

                                <!DOCTYPE html>
<html dir="rtl"  lang="fa-IR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flex</title>
   <style>
    .container {
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
      gap: 1rem 1rem;
      border: 2px solid #6b9080;
      margin: 1% 20%;
      height: 300px;
    }
    .box {
      padding: 15px;
      font-size: 15px;
    }
    .box-1 {
      background-color:  #184e77;
    }
    .box-2 {
      background-color:  #1e6091;
    }
    .box-3 {
      background-color:  #1a759f;
    }
    .box-4 {
      background-color:  #168aad;
    }
    .box-5 {
      background-color:  #34a0a4;
    }
    .box-6 {
      background-color:  #52b69a;
    }
    .box-7 {
      background-color:  #76c893;
    }
    .box-8 {
      background-color:  #99d98c;
    }
    .box-9 {
      background-color:  #184e77;
    }
    .box-10 {
      background-color:  #1e6091;
    }
    .box-11 {
      background-color:  #1a759f;
    }
    .box-12 {
      background-color:  #168aad;
    }
    }
   </style>
</head>
<body>
  <div class="container">
     <div class="box box-1"> 1 </div>
     <div class="box box-2"> 2 </div>
     <div class="box box-3"> 3 </div>
     <div class="box box-4"> 4 </div>
     <div class="box box-5"> 5 </div>
     <div class="box box-6"> 6 </div>
     <div class="box box-7"> 7 </div>
     <div class="box box-8"> 8 </div>
     <div class="box box-9"> 9 </div>
     <div class="box box-10"> 10 </div>
     <div class="box box-11"> 11 </div>
     <div class="box box-12"> 12 </div>
</body>
</html>

    

❮ قبلی بعدی ❯