
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>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css” />
</head>
<body>
<div class=”aside”>
<i class=”fa fa-bars”></i>
<i class=”fa fa-home”></i>
<i class=”fa fa-search”></i>
<i class=”fa fa-volume-up”></i>
<i class=”fa fa-user”></i>
<i class=”fa fa-spotify”></i>
<i class=”fa fa-cog”></i>
<i class=”fa fa-soundcloud”></i>
</div>
<div class=”main”>
<div class=”main__header”>
<div class=”img”>
<img src=”http://bit.ly/2sc2NJd”/> <!–Album art–>
</div>
<section class=”details”> <!–other details of the album–>
<div>
<p>CattyBoard Top ۱۰۰ Single Charts (۱۱٫۰۶٫۳۶)</p>
<p class=”sm–hide”>Unknown Artist</p>
<p class=”sm–hide”>2016 . Charts . ۱۰۰ songs</p>
</div>
<div> <!–Music controls–>
<i class=”fa fa-play”> Play all</i>
<i class=”fa fa-plus”> Add to</i>
<i class=”fa fa-ellipsis-h”> More</i>
</div>
</section>
</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>
</div>
<div class=”footer”></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
}
}
تو تونستی!