جلسه ۷۰: ترکیب CSS Grid با Flexbox در CSS

ترکیب CSS Grid با Flexbox

webآگوست 25, 2021

در این بخش ، شما یاد خواهید گرفت که Flexbox و CSS Grid چگونه با هم کارمی کنند – به طور مسالمت آمیز. این دو فناوری ، Flexbox و Grid ، نحوه برخورد با لایه بندی در CSS را تغییر داده اند. در صورت امکان ، استفاده از هر دو فناوری کارآمد است. بیایید وارد شویم برای بخش مربوط به جزئیات موسیقی ، از Flexbox استفاده خواهیم کرد.

چگونه می دانید که کجا از Flexbox استفاده کنید؟

به عنوان یک قانون کلی ، استفاده از Grid برای طرح بندی کلی صفحه و Flexbox برای مولفه های داخلی UI مناسب است. یک مورد grid می تواند یک ظرف فلکس باشد. یک مورد فلکس همچنین می تواند یک ظرف grid باشد. گرچه از دومی اغلب استفاده می شود. من فکر می کنم شما یک درک مناسب از flexbox در درس قبلی دارید. مثل همیشه ، با html شروع کنید در زیر یک div وجود دارد ، با لیستی از آهنگ ها. لیست آهنگ ها دارای پاراگراف هایی است که شامل نام آهنگ ، هنرمند ، مدت زمان آهنگ و “سینک ابری گربه ای” است.

<div class=”main__body”> <div> <p>1. One Dance</p> <p>Crake feat CatKid & Cyla</p> <p>2:54</p> <p><span>CATTY CLOUD SYNC</span></p> </div> <div> <p>2. Panda</p> <p>Cattee</p>

<p>4:06</p> <p><span>CATTY CLOUD SYNC</span></p> </div> <div> <p>3. Can’t Stop the Feeling!</p> <p>Catin Cimberlake</p> <p>3:56</p> <p><span>CATTY CLOUD SYNC</span></p> </div> <div> <p>4. Work From Home</p> <p>Cat Harmony feat Colla</p> <p>3:34</p> <p><span>CATTY CLOUD SYNC</span></p> </div> </div>

این چیزی است که ما دریافت کرده ایم:

.main__body یک مورد grid است. در صورت مفید بودن می توانیم آن را به یک ظرف فلکس تبدیل کنیم. برای موارد استفاده ما ، هر فرزند مستقیم div .main__body باید یک ظرف فلکس باشد. این div است که شامل نام آهنگ ، هنرمند ، مدت زمان آهنگ و “سینک ابری گربه ای” است.

.main__body > div {
  display:flex;
}

اکنون عرض را بین عناصر کودک تقسیم کنید:

.main__body > div p{
  flex: 0 0 25%;
}

شما با من موافقت خواهید کرد که در این مرحله ، موارد ضروری طرح انجام شده است. بله نگاهی به زمین بازی زیر بیاندازید:

<html>

<head>

</head>

<body>

</div>

</div>

<div>

<p>CattyBoard Top ۱۰۰ Single Charts (۱۱٫۰۶٫۳۶)</p>

<p class=”sm–hide”>Unknown Artist</p>

<p class=”sm–hide”>2016 . Charts . ۱۰۰ songs</p>

</div>

</div>

</section>

</div>

<div>

<p>1. One Dance</p>

<p>Crake feat CatKid & Cyla</p>

<p><span>CATTY CLOUD SYNC</span></p>

</div>

<div>

<p>2. Panda</p>

<p>Cattee</p>

<p><span>CATTY CLOUD SYNC</span></p>

</div>

<div>

<p>3. Can’t Stop the Feeling!</p>

<p>Catin Cimberlake</p>

<p><span>CATTY CLOUD SYNC</span></p>

</div>

<div>

<p>Cat Harmony feat Colla</p>

<p><span>CATTY CLOUD SYNC</span></p>

</div>

</body>

</html>

/*============
  basic reset 
============== */
body {
  margin: 0;
  padding: 0;
}

/*=============================
  default grid set up -> mobile first
===============================*/
body {
      display: grid;
      min-height: 100vh;
      min-width: 100%;
      grid-template-rows: 1fr 90px;
      grid-template-columns: 1fr;
      grid-template-areas: "content"
                           "footer"
    }

.main {
  background-color: #2c3e50;
  grid-area: content;
}

.footer {
  background-color: #c0392b;
  grid-area: footer;
}

.aside {
  color: rgba(255,255,255,0.8);
  background-color: #7f8c8d;
  grid-area: sidebar;
}

/* hide the icons */
.aside i {
  display: none;
}

/*
  main
*/

 img {
  max-width: 100%;
}

.main__header {
  display: grid;
  color: rgba(255,255,255,0.9);
  grid-template-areas: "img"
                       "dtls"; 
}

.main__header > .img {
  grid-area: img;
}
.main__header > .details {
  grid-area: dtls;
} 
.main__body > div {
  display:flex;
}

.main__body > div p{
  flex: 0 0 25%;
}

/*=============================
  larger screens
===============================*/

@media only screen and (min-width:600px) {
  body {
    grid-template-columns: 40px 1fr;    
    grid-template-areas: "sidebar  content"
                           "footer  footer";
  }
  
  .aside {
     display: grid;
     justify-items: center;
     align-items: center;
  }
  
  /* show the icons */
  .aside i {
    display: block;
  }
  
   .main__header {
    grid-template-columns: 250px 1fr;
    grid-template-areas: "img dtls"
  } 
}

/* ===============
Mobile: Phones
==================*/
@media screen and (max-width: 600px) {
  .sm--hide {
    display: none;
  } 
  .main__header {
    justify-items: center;
  }
  .main__header > .details {
    text-align: center;
  }  
  .img > img {
    width: 150px
  }
}

تو تونستی!

webآگوست 25, 2021