cssطراحی سایت

جلسه ۶۱: ساخت یک لایه های برنامه موسیقی با Flexbox در CSS

  html,
  body {
    height: 100%; /*setting this explicitly is important*/
  }
li {
  display: flex; /*Targets each list containing the paragraphs*/
  padding: 0 20px;
  min-height: 50px;
}

li p {
  flex: 0 0 25%; /*This is the sweet sauce*/
}

  body {
    display: flex; /*flex superpowers activated! */
    flex-direction: column; /*Stack the flex-items (main and footer elements) vertically NOT horizontally*/
    background-color: #fff;
    margin: 0;
    font-family: Lato, sans-serif;
    color: #222;
    font-size: 0.9em;
  }

    main {
  flex: 1 0 auto; /*was a flex item*/
  display: flex; /*I just included this! - now a flex container with flex items: sidebar & main content section*/
  }

  footer {
    flex: 0 0 90px; /*don't grow or shrink - just stay at a height of 90px.*/
     padding: 10px;
    color: #fff;
    background-color: rgba(61, 100, 158, .9);
  }

  aside {
    flex: 0 0 40px; /*as a flex item: do not grow or shrink. Just stay fixed at 40px*/
    display: flex; /*Now you're a flex-container, you can decide how your flex-items are laid*/
    flex-direction: column; /*Stack my flex-item's vertically...change the default direction*/
    justify-content: space-around; /*Interesting...since direction is changed, this works on the vertical direction*/
    align-items: center; /*direction is changed! This affects the horizontal direction*/
    background-color: #f2f2f2; /*make me pretty*/
  }
  /*font size for the icons*/
  aside i.fa {
    font-size: 0.9em;
  }

.content {
    display: flex;
    flex: 1 0 auto; /*this makes sure the section grows o fill the entire available space*/
    flex-direction: column;
}

.music-head {
  flex: 0 0 280px; /*Same memo, don't grow or shrink - stay at 280px*/
  display: flex;  
  padding: 40px;
  background-color: #4e4e4e;
}

.music-list {
    flex: 1 0 auto;
    list-style-type: none;
    padding: 5px 10px 0px;
}

<!DOCTYPE html>

  <html>

  <head>

  <title>Catty Music</title>

  </head>

    <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>

    <main>

  <aside> <!–This represents the sidebar and contained in it are icon sets from font-awesome–>

    <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>

  </aside>

<section class=”content”> <!–This section was empty. Populating it with content–>

  <div class=”music-head”> <!–First list item: contains music details–>

      <img src=”/udata/1mQ8VgpWlOk/cattyboard.jpg” /> <!–Album art–>

      <section class=”catty-music”> <!–other details of the album–>

          <div>

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

            <p>Unknown Artist</p>

            <p>2016 . Charts . ۱۰۰ songs</p>

          </div>

          <div> <!–Music controls–>

            <i class=”fa fa-play”> &nbsp;Play all</i>

            <i class=”fa fa-plus”> &nbsp;Add to</i>

            <i class=”fa fa-ellipsis-h”>&nbsp;&nbsp;More</i>

          </div>

      </section>

  </div> <!–end .music-head–>

  <ul class=”music-list”>  <!–Second list item: Contains a list of all songs displayed–>

      <li>

          <p>1. One Dance</p>

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

          <p>2:54</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

      <li>

          <p>2. Panda</p>

          <p>Cattee</p>

          <p>4:06</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

      <li>

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

          <p>Catin Cimberlake</p>

          <p>3:56</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

      <li>

          <p>4. Work From Home</p>

          <p>Cat Harmony feat Colla</p>

          <p>3:34</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

    </ul>

</section>

</main>

  <body>

  <footer></footer> <!–to contain the music control buttons and song details–>

  </body>

</html>

با دادن رنگهای متناوب به لیستها ، کمی بیشتر استایل کنید و با برچسب “سینک ابری گربه ای” نیز برخورد کنید.

li span.catty-cloud {
  border: 1px solid black;
  font-size: 0.6em;
  padding: 3px;
}

li:nth-child(2n) {
  background-color: #f2f2f2;
}

بنابراین ، شما آن را می کشید و واقعاً بهتر می توانید زبان انعطاف پذیر را درک کنید! این همان چیزی است که اکنون باید داشته باشید.

  html,
  body {
    height: 100%; /*setting this explicitly is important*/
  }

li {
  display: flex; /*Targets each list containing the paragraphs*/
  padding: 0 20px;
  min-height: 50px;
}

li p {
  flex: 0 0 25%; /*This is the sweet sauce*/
}

li span.catty-cloud {
  border: 1px solid black;
  font-size: 0.6em;
  padding: 3px;
}

li:nth-child(2n) {
  background-color: #f2f2f2;
}
  body {
    display: flex; /*flex superpowers activated! */
    flex-direction: column; /*Stack the flex-items (main and footer elements) vertically NOT horizontally*/
    background-color: #fff;
    margin: 0;
    font-family: Lato, sans-serif;
    color: #222;
    font-size: 0.9em;
  }

    main {
  flex: 1 0 auto; /*was a flex item*/
  display: flex; /*I just included this! - now a flex container with flex items: sidebar & main content section*/
  }

  footer {
    flex: 0 0 90px; /*don't grow or shrink - just stay at a height of 90px.*/
     padding: 10px;
    color: #fff;
    background-color: rgba(61, 100, 158, .9);
  }
  aside {
    flex: 0 0 40px; /*as a flex item: do not grow or shrink. Just stay fixed at 40px*/
    display: flex; /*Now you're a flex-container, you can decide how your flex-items are laid*/
    flex-direction: column; /*Stack my flex-item's vertically...change the default direction*/
    justify-content: space-around; /*Interesting...since direction is changed, this works on the vertical direction*/
    align-items: center; /*direction is changed! This affects the horizontal direction*/
    background-color: #f2f2f2; /*make me pretty*/
  }

  /*font size for the icons*/
  aside i.fa {
    font-size: 0.9em;
  }

.content {
    display: flex;
    flex: 1 0 auto; /*this makes sure the section grows o fill the entire available space*/
    flex-direction: column;
}

.music-head {
  flex: 0 0 280px; /*Same memo, don't grow or shrink - stay at 280px*/
  display: flex;  
  padding: 40px;
  background-color: #4e4e4e;
}

.music-list {
    flex: 1 0 auto;
    list-style-type: none;
    padding: 5px 10px 0px;
}

<!DOCTYPE html>

  <html>

  <head>

  <title>Catty Music</title>

  </head>

    <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>

    <main>

  <aside> <!–This represents the sidebar and contained in it are icon sets from font-awesome–>

    <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>

  </aside>

 

<section class=”content”> <!–This section was empty. Populating it with content–>

 

  <div class=”music-head”> <!–First list item: contains music details–>

      <img src=”/udata/1mQ8VgpWlOk/cattyboard.jpg” /> <!–Album art–>

 

      <section class=”catty-music”> <!–other details of the album–>

          <div>

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

            <p>Unknown Artist</p>

            <p>2016 . Charts . ۱۰۰ songs</p>

          </div>

 

          <div> <!–Music controls–>

            <i class=”fa fa-play”> &nbsp;Play all</i>

            <i class=”fa fa-plus”> &nbsp;Add to</i>

            <i class=”fa fa-ellipsis-h”>&nbsp;&nbsp;More</i>

          </div>

      </section>

  </div> <!–end .music-head–>

 

  <ul class=”music-list”>  <!–Second list item: Contains a list of all songs displayed–>

      <li>

          <p>1. One Dance</p>

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

          <p>2:54</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

 

      <li>

          <p>2. Panda</p>

          <p>Cattee</p>

          <p>4:06</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

 

      <li>

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

          <p>Catin Cimberlake</p>

          <p>3:56</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

 

      <li>

          <p>4. Work From Home</p>

          <p>Cat Harmony feat Colla</p>

          <p>3:34</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

    </ul>

</section>  

      

</main>

  <body>

 

  <footer></footer> <!–to contain the music control buttons and song details–>

 

  </body>

</html>

از این تکنیک استفاده کنید

این تکنیک بسیار ارزشمند است. می توانید از آن برای ایجاد مناطق محتوای نابرابر استفاده کنید. بگویید ، یک نمای ۲ ستونی. یک بخش می تواند ۶۰٪ فضای موجود را اشغال کند و قسمت دیگر ۴۰٪ بخش اول: ۰ ۰ ۶۰٪؛ بخش دوم: ۰ ۰ ۴۰٪؛ شما می توانید از این روش برای ساخت سیستم های شبکه استفاده کنید. اکنون به مشکل دوم پرداخته خواهد شد.

زیباتر نشان دادن متن جزئیات آلبوم.

موارد بسیار ساده در زیر وجود دارد و تو این کار را کردی کار شما کاملاً تمام شده است.

.catty-music{
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  font-weight: 300;
  color: #fff;
  padding-left: 50px;
}

.catty-music div:nth-child(1){
  margin-bottom: auto;
}

.catty-music div:nth-child(2){
  margin-top: 0;
}

.catty-music div:nth-child(2) i.fa{
  font-size: 0.9em;
  padding: 0 0.7em;
  font-weight: 300;
}
.catty-music div:nth-child(1) p:first-child{
  font-size: 1.8em;
  margin: 0 0 10px;
}

.catty-music div:nth-child(1) p:not(:first-child){
  font-size: 0.9em;
  margin: 2px 0;
}

وای. باور نمی کنم شما به این مرحله رسیده باشید. عالیه!

  html,
  body {
    height: 100%; /*setting this explicitly is important*/
  }

li {
  display: flex; /*Targets each list containing the paragraphs*/
  padding: 0 20px;
  min-height: 50px;
}

li p {
  flex: 0 0 25%; /*This is the sweet sauce*/
}

li span.catty-cloud {
  border: 1px solid black;
  font-size: 0.6em;
  padding: 3px;
}

li:nth-child(2n) {
  background-color: #f2f2f2;
}

  body {
    display: flex; /*flex superpowers activated! */
    flex-direction: column; /*Stack the flex-items (main and footer elements) vertically NOT horizontally*/
    background-color: #fff;
    margin: 0;
    font-family: Lato, sans-serif;
    color: #222;
    font-size: 0.9em;
  }

    main {
  flex: 1 0 auto; /*was a flex item*/
  display: flex; /*I just included this! - now a flex container with flex items: sidebar & main content section*/
  }

  footer {
    flex: 0 0 90px; /*don't grow or shrink - just stay at a height of 90px.*/
     padding: 10px;
    color: #fff;
    background-color: rgba(61, 100, 158, .9);
  }

  aside {
    flex: 0 0 40px; /*as a flex item: do not grow or shrink. Just stay fixed at 40px*/
    display: flex; /*Now you're a flex-container, you can decide how your flex-items are laid*/
    flex-direction: column; /*Stack my flex-item's vertically...change the default direction*/
    justify-content: space-around; /*Interesting...since direction is changed, this works on the vertical direction*/
    align-items: center; /*direction is changed! This affects the horizontal direction*/
    background-color: #f2f2f2; /*make me pretty*/
  }

  /*font size for the icons*/
  aside i.fa {
    font-size: 0.9em;
  }

.content {
    display: flex;
    flex: 1 0 auto; /*this makes sure the section grows o fill the entire available space*/
    flex-direction: column;
}

.music-head {
  flex: 0 0 280px; /*Same memo, don't grow or shrink - stay at 280px*/
  display: flex;  
  padding: 40px;
  background-color: #4e4e4e;
}

.music-list {
    flex: 1 0 auto;
    list-style-type: none;
    padding: 5px 10px 0px;
}

.catty-music{
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  font-weight: 300;
  color: #fff;
  padding-left: 50px;
}

.catty-music div:nth-child(1){
  margin-bottom: auto;
}

.catty-music div:nth-child(2){
  margin-top: 0;
}

.catty-music div:nth-child(2) i.fa{
  font-size: 0.9em;
  padding: 0 0.7em;
  font-weight: 300;
}
.catty-music div:nth-child(1) p:first-child{
  font-size: 1.8em;
  margin: 0 0 10px;
}

.catty-music div:nth-child(1) p:not(:first-child){
  font-size: 0.9em;
  margin: 2px 0;
}

<!DOCTYPE html>

  <html>

  <head>

  <title>Catty Music</title>

  </head>

    <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>

    <main>

  <aside> <!–This represents the sidebar and contained in it are icon sets from font-awesome–>

    <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>

  </aside>

 

<section class=”content”> <!–This section was empty. Populating it with content–>

 

  <div class=”music-head”> <!–First list item: contains music details–>

 

      <img src=”/udata/1mQ8VgpWlOk/cattyboard.jpg” /> <!–Album art–>

 

      <section class=”catty-music”> <!–other details of the album–>

          <div>

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

            <p>Unknown Artist</p>

            <p>2016 . Charts . ۱۰۰ songs</p>

          </div>

 

          <div> <!–Music controls–>

            <i class=”fa fa-play”> &nbsp;Play all</i>

            <i class=”fa fa-plus”> &nbsp;Add to</i>

            <i class=”fa fa-ellipsis-h”>&nbsp;&nbsp;More</i>

          </div>

      </section>

  </div> <!–end .music-head–>

 

  <ul class=”music-list”>  <!–Second list item: Contains a list of all songs displayed–>

      <li>

          <p>1. One Dance</p>

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

          <p>2:54</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

 

      <li>

          <p>2. Panda</p>

          <p>Cattee</p>

          <p>4:06</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

 

      <li>

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

          <p>Catin Cimberlake</p>

          <p>3:56</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

 

      <li>

          <p>4. Work From Home</p>

          <p>Cat Harmony feat Colla</p>

          <p>3:34</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

    </ul>

</section>  

      

</main>

  <body>

 

  <footer></footer> <!–to contain the music control buttons and song details–>

 

  </body>

</html>

شما اکنون در حال تبدیل شدن به یک نینجا Flexbox هستید. در مرحله بعدی ، خواهید دید که Flexbox چگونه می تواند در طراحی رسپانسیو کمک کند.

  html,
  body {
    height: 100%; /*setting this explicitly is important*/
  }
  body {
    display: flex; /*flex superpowers activated! */
    flex-direction: column; /*Stack the flex-items (main and footer elements) vertically NOT horizontally*/
    background-color: #fff;
    margin: 0;
    font-family: Lato, sans-serif;
    color: #222;
    font-size: 0.9em;
  }

    main {
  flex: 1 0 auto; /*was a flex item*/
  display: flex; /*I just included this! - now a flex container with flex items: sidebar & main content section*/
  }

  footer {
    flex: 0 0 90px; /*don't grow or shrink - just stay at a height of 90px.*/
     padding: 10px;
    color: #fff;
    background-color: rgba(61, 100, 158, .9);
  }

  aside {
    flex: 0 0 40px; /*as a flex item: do not grow or shrink. Just stay fixed at 40px*/
    display: flex; /*Now you're a flex-container, you can decide how your flex-items are laid*/
    flex-direction: column; /*Stack my flex-item's vertically...change the default direction*/
    justify-content: space-around; /*Interesting...since direction is changed, this works on the vertical direction*/
    align-items: center; /*direction is changed! This affects the horizontal direction*/
    background-color: #f2f2f2; /*make me pretty*/
  }

  /*font size for the icons*/
  aside i.fa {
    font-size: 0.9em;
  }

.content {
    display: flex;
    flex: 1 0 auto; /*this makes sure the section grows o fill the entire available space*/
    flex-direction: column;
}

.music-head {
  flex: 0 0 280px; /*Same memo, don't grow or shrink - stay at 280px*/
  display: flex;  
  padding: 40px;
  background-color: #4e4e4e;
}

.music-list {
    flex: 1 0 auto;
    list-style-type: none;
    padding: 5px 10px 0px;
}

<!DOCTYPE html>

  <html>

  <head>

  <title>Catty Music</title>

  </head>

    <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>

    <main>

  <aside> <!–This represents the sidebar and contained in it are icon sets from font-awesome–>

    <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>

  </aside>

<section class=”content”> <!–This section was empty. Populating it with content–>

  <div class=”music-head”> <!–First list item: contains music details–>

      <img src=”/udata/1mQ8VgpWlOk/cattyboard.jpg” /> <!–Album art–>

      <section class=”catty-music”> <!–other details of the album–>

          <div>

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

            <p>Unknown Artist</p>

            <p>2016 . Charts . ۱۰۰ songs</p>

          </div>

          <div> <!–Music controls–>

            <i class=”fa fa-play”> &nbsp;Play all</i>

            <i class=”fa fa-plus”> &nbsp;Add to</i>

            <i class=”fa fa-ellipsis-h”>&nbsp;&nbsp;More</i>

          </div>

      </section>

  </div> <!–end .music-head–>

  <ul class=”music-list”>  <!–Second list item: Contains a list of all songs displayed–>

      <li>

          <p>1. One Dance</p>

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

          <p>2:54</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

      <li>

          <p>2. Panda</p>

          <p>Cattee</p>

          <p>4:06</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

      <li>

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

          <p>Catin Cimberlake</p>

          <p>3:56</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

      <li>

          <p>4. Work From Home</p>

          <p>Cat Harmony feat Colla</p>

          <p>3:34</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

    </ul>

</section>

</main>

  <body>

  <footer></footer> <!–to contain the music control buttons and song details–>

  </body>

</html>

در اینجا چند مشکل وجود دارد. لیست آهنگ ها وحشتناک به نظر می رسد.

بخشی که شامل هنر موسیقی است متون واقعاً زشتی دارد.

باز هم ، من شما را در حل این مشکلات راهنمایی می کنم.

در زیر راه حل های پیشنهادی من آورده شده است.

پرداختن به لیست آهنگ ها

هر لیست از آهنگ ها شامل ۴ پاراگراف است. عنوان آهنگ ، هنرمند ، مدت زمان و “سینک ابر گربه ای”. باید راهی وجود داشته باشد که همه اینها را در یک سطر قرار دهد و هر پاراگراف فضای مساوی در این خط را اشغال کند. Flexbox به نجات ما می آید! مفهوم اینجا در بسیاری از سیستم های شبکه به کار رفته است. ترجمه آن را به کد.

li {

  display: flex; /*Targets each list containing the paragraphs*/

  padding: ۰ ۲۰px;

  min-height: ۵۰px;

}

li p {

  flex: ۰ ۰ ۲۵%; /*This is the sweet sauce*/

}

می بینید که آنجا برای پاراگراف ها چه اتفاقی می افتد؟ انعطاف پذیر: ۰ ۰ ۲۵٪ “رشد نکنید یا کوچک نشوید اما هر پاراگراف باید ۲۵٪ از فضای موجود را اشغال کند”. فضا به طور مساوی بین بندها تقسیم می شود.

  html,
  body {
    height: 100%; /*setting this explicitly is important*/
  }
li {
  display: flex; /*Targets each list containing the paragraphs*/
  padding: 0 20px;
  min-height: 50px;
}

li p {
  flex: 0 0 25%; /*This is the sweet sauce*/
}

  body {
    display: flex; /*flex superpowers activated! */
    flex-direction: column; /*Stack the flex-items (main and footer elements) vertically NOT horizontally*/
    background-color: #fff;
    margin: 0;
    font-family: Lato, sans-serif;
    color: #222;
    font-size: 0.9em;
  }

    main {
  flex: 1 0 auto; /*was a flex item*/
  display: flex; /*I just included this! - now a flex container with flex items: sidebar & main content section*/
  }

  footer {
    flex: 0 0 90px; /*don't grow or shrink - just stay at a height of 90px.*/
     padding: 10px;
    color: #fff;
    background-color: rgba(61, 100, 158, .9);
  }

  aside {
    flex: 0 0 40px; /*as a flex item: do not grow or shrink. Just stay fixed at 40px*/
    display: flex; /*Now you're a flex-container, you can decide how your flex-items are laid*/
    flex-direction: column; /*Stack my flex-item's vertically...change the default direction*/
    justify-content: space-around; /*Interesting...since direction is changed, this works on the vertical direction*/
    align-items: center; /*direction is changed! This affects the horizontal direction*/
    background-color: #f2f2f2; /*make me pretty*/
  }
  /*font size for the icons*/
  aside i.fa {
    font-size: 0.9em;
  }

.content {
    display: flex;
    flex: 1 0 auto; /*this makes sure the section grows o fill the entire available space*/
    flex-direction: column;
}

.music-head {
  flex: 0 0 280px; /*Same memo, don't grow or shrink - stay at 280px*/
  display: flex;  
  padding: 40px;
  background-color: #4e4e4e;
}

.music-list {
    flex: 1 0 auto;
    list-style-type: none;
    padding: 5px 10px 0px;
}

<!DOCTYPE html>

  <html>

  <head>

  <title>Catty Music</title>

  </head>

    <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>

    <main>

  <aside> <!–This represents the sidebar and contained in it are icon sets from font-awesome–>

    <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>

  </aside>

<section class=”content”> <!–This section was empty. Populating it with content–>

  <div class=”music-head”> <!–First list item: contains music details–>

      <img src=”/udata/1mQ8VgpWlOk/cattyboard.jpg” /> <!–Album art–>

      <section class=”catty-music”> <!–other details of the album–>

          <div>

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

            <p>Unknown Artist</p>

            <p>2016 . Charts . ۱۰۰ songs</p>

          </div>

          <div> <!–Music controls–>

            <i class=”fa fa-play”> &nbsp;Play all</i>

            <i class=”fa fa-plus”> &nbsp;Add to</i>

            <i class=”fa fa-ellipsis-h”>&nbsp;&nbsp;More</i>

          </div>

      </section>

  </div> <!–end .music-head–>

  <ul class=”music-list”>  <!–Second list item: Contains a list of all songs displayed–>

      <li>

          <p>1. One Dance</p>

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

          <p>2:54</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

      <li>

          <p>2. Panda</p>

          <p>Cattee</p>

          <p>4:06</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

      <li>

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

          <p>Catin Cimberlake</p>

          <p>3:56</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

      <li>

          <p>4. Work From Home</p>

          <p>Cat Harmony feat Colla</p>

          <p>3:34</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

    </ul>

</section>

</main>

  <body>

  <footer></footer> <!–to contain the music control buttons and song details–>

  </body>

</html>

با دادن رنگهای متناوب به لیستها ، کمی بیشتر استایل کنید و با برچسب “سینک ابری گربه ای” نیز برخورد کنید.

li span.catty-cloud {
  border: 1px solid black;
  font-size: 0.6em;
  padding: 3px;
}

li:nth-child(2n) {
  background-color: #f2f2f2;
}

بنابراین ، شما آن را می کشید و واقعاً بهتر می توانید زبان انعطاف پذیر را درک کنید! این همان چیزی است که اکنون باید داشته باشید.

  html,
  body {
    height: 100%; /*setting this explicitly is important*/
  }

li {
  display: flex; /*Targets each list containing the paragraphs*/
  padding: 0 20px;
  min-height: 50px;
}

li p {
  flex: 0 0 25%; /*This is the sweet sauce*/
}

li span.catty-cloud {
  border: 1px solid black;
  font-size: 0.6em;
  padding: 3px;
}

li:nth-child(2n) {
  background-color: #f2f2f2;
}
  body {
    display: flex; /*flex superpowers activated! */
    flex-direction: column; /*Stack the flex-items (main and footer elements) vertically NOT horizontally*/
    background-color: #fff;
    margin: 0;
    font-family: Lato, sans-serif;
    color: #222;
    font-size: 0.9em;
  }

    main {
  flex: 1 0 auto; /*was a flex item*/
  display: flex; /*I just included this! - now a flex container with flex items: sidebar & main content section*/
  }

  footer {
    flex: 0 0 90px; /*don't grow or shrink - just stay at a height of 90px.*/
     padding: 10px;
    color: #fff;
    background-color: rgba(61, 100, 158, .9);
  }
  aside {
    flex: 0 0 40px; /*as a flex item: do not grow or shrink. Just stay fixed at 40px*/
    display: flex; /*Now you're a flex-container, you can decide how your flex-items are laid*/
    flex-direction: column; /*Stack my flex-item's vertically...change the default direction*/
    justify-content: space-around; /*Interesting...since direction is changed, this works on the vertical direction*/
    align-items: center; /*direction is changed! This affects the horizontal direction*/
    background-color: #f2f2f2; /*make me pretty*/
  }

  /*font size for the icons*/
  aside i.fa {
    font-size: 0.9em;
  }

.content {
    display: flex;
    flex: 1 0 auto; /*this makes sure the section grows o fill the entire available space*/
    flex-direction: column;
}

.music-head {
  flex: 0 0 280px; /*Same memo, don't grow or shrink - stay at 280px*/
  display: flex;  
  padding: 40px;
  background-color: #4e4e4e;
}

.music-list {
    flex: 1 0 auto;
    list-style-type: none;
    padding: 5px 10px 0px;
}

<!DOCTYPE html>

  <html>

  <head>

  <title>Catty Music</title>

  </head>

    <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>

    <main>

  <aside> <!–This represents the sidebar and contained in it are icon sets from font-awesome–>

    <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>

  </aside>

 

<section class=”content”> <!–This section was empty. Populating it with content–>

 

  <div class=”music-head”> <!–First list item: contains music details–>

      <img src=”/udata/1mQ8VgpWlOk/cattyboard.jpg” /> <!–Album art–>

 

      <section class=”catty-music”> <!–other details of the album–>

          <div>

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

            <p>Unknown Artist</p>

            <p>2016 . Charts . ۱۰۰ songs</p>

          </div>

 

          <div> <!–Music controls–>

            <i class=”fa fa-play”> &nbsp;Play all</i>

            <i class=”fa fa-plus”> &nbsp;Add to</i>

            <i class=”fa fa-ellipsis-h”>&nbsp;&nbsp;More</i>

          </div>

      </section>

  </div> <!–end .music-head–>

 

  <ul class=”music-list”>  <!–Second list item: Contains a list of all songs displayed–>

      <li>

          <p>1. One Dance</p>

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

          <p>2:54</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

 

      <li>

          <p>2. Panda</p>

          <p>Cattee</p>

          <p>4:06</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

 

      <li>

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

          <p>Catin Cimberlake</p>

          <p>3:56</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

 

      <li>

          <p>4. Work From Home</p>

          <p>Cat Harmony feat Colla</p>

          <p>3:34</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

    </ul>

</section>  

      

</main>

  <body>

 

  <footer></footer> <!–to contain the music control buttons and song details–>

 

  </body>

</html>

از این تکنیک استفاده کنید

این تکنیک بسیار ارزشمند است. می توانید از آن برای ایجاد مناطق محتوای نابرابر استفاده کنید. بگویید ، یک نمای ۲ ستونی. یک بخش می تواند ۶۰٪ فضای موجود را اشغال کند و قسمت دیگر ۴۰٪ بخش اول: ۰ ۰ ۶۰٪؛ بخش دوم: ۰ ۰ ۴۰٪؛ شما می توانید از این روش برای ساخت سیستم های شبکه استفاده کنید. اکنون به مشکل دوم پرداخته خواهد شد.

زیباتر نشان دادن متن جزئیات آلبوم.

موارد بسیار ساده در زیر وجود دارد و تو این کار را کردی کار شما کاملاً تمام شده است.

.catty-music{
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  font-weight: 300;
  color: #fff;
  padding-left: 50px;
}

.catty-music div:nth-child(1){
  margin-bottom: auto;
}

.catty-music div:nth-child(2){
  margin-top: 0;
}

.catty-music div:nth-child(2) i.fa{
  font-size: 0.9em;
  padding: 0 0.7em;
  font-weight: 300;
}
.catty-music div:nth-child(1) p:first-child{
  font-size: 1.8em;
  margin: 0 0 10px;
}

.catty-music div:nth-child(1) p:not(:first-child){
  font-size: 0.9em;
  margin: 2px 0;
}

وای. باور نمی کنم شما به این مرحله رسیده باشید. عالیه!

  html,
  body {
    height: 100%; /*setting this explicitly is important*/
  }

li {
  display: flex; /*Targets each list containing the paragraphs*/
  padding: 0 20px;
  min-height: 50px;
}

li p {
  flex: 0 0 25%; /*This is the sweet sauce*/
}

li span.catty-cloud {
  border: 1px solid black;
  font-size: 0.6em;
  padding: 3px;
}

li:nth-child(2n) {
  background-color: #f2f2f2;
}

  body {
    display: flex; /*flex superpowers activated! */
    flex-direction: column; /*Stack the flex-items (main and footer elements) vertically NOT horizontally*/
    background-color: #fff;
    margin: 0;
    font-family: Lato, sans-serif;
    color: #222;
    font-size: 0.9em;
  }

    main {
  flex: 1 0 auto; /*was a flex item*/
  display: flex; /*I just included this! - now a flex container with flex items: sidebar & main content section*/
  }

  footer {
    flex: 0 0 90px; /*don't grow or shrink - just stay at a height of 90px.*/
     padding: 10px;
    color: #fff;
    background-color: rgba(61, 100, 158, .9);
  }

  aside {
    flex: 0 0 40px; /*as a flex item: do not grow or shrink. Just stay fixed at 40px*/
    display: flex; /*Now you're a flex-container, you can decide how your flex-items are laid*/
    flex-direction: column; /*Stack my flex-item's vertically...change the default direction*/
    justify-content: space-around; /*Interesting...since direction is changed, this works on the vertical direction*/
    align-items: center; /*direction is changed! This affects the horizontal direction*/
    background-color: #f2f2f2; /*make me pretty*/
  }

  /*font size for the icons*/
  aside i.fa {
    font-size: 0.9em;
  }

.content {
    display: flex;
    flex: 1 0 auto; /*this makes sure the section grows o fill the entire available space*/
    flex-direction: column;
}

.music-head {
  flex: 0 0 280px; /*Same memo, don't grow or shrink - stay at 280px*/
  display: flex;  
  padding: 40px;
  background-color: #4e4e4e;
}

.music-list {
    flex: 1 0 auto;
    list-style-type: none;
    padding: 5px 10px 0px;
}

.catty-music{
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  font-weight: 300;
  color: #fff;
  padding-left: 50px;
}

.catty-music div:nth-child(1){
  margin-bottom: auto;
}

.catty-music div:nth-child(2){
  margin-top: 0;
}

.catty-music div:nth-child(2) i.fa{
  font-size: 0.9em;
  padding: 0 0.7em;
  font-weight: 300;
}
.catty-music div:nth-child(1) p:first-child{
  font-size: 1.8em;
  margin: 0 0 10px;
}

.catty-music div:nth-child(1) p:not(:first-child){
  font-size: 0.9em;
  margin: 2px 0;
}

<!DOCTYPE html>

  <html>

  <head>

  <title>Catty Music</title>

  </head>

    <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>

    <main>

  <aside> <!–This represents the sidebar and contained in it are icon sets from font-awesome–>

    <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>

  </aside>

 

<section class=”content”> <!–This section was empty. Populating it with content–>

 

  <div class=”music-head”> <!–First list item: contains music details–>

 

      <img src=”/udata/1mQ8VgpWlOk/cattyboard.jpg” /> <!–Album art–>

 

      <section class=”catty-music”> <!–other details of the album–>

          <div>

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

            <p>Unknown Artist</p>

            <p>2016 . Charts . ۱۰۰ songs</p>

          </div>

 

          <div> <!–Music controls–>

            <i class=”fa fa-play”> &nbsp;Play all</i>

            <i class=”fa fa-plus”> &nbsp;Add to</i>

            <i class=”fa fa-ellipsis-h”>&nbsp;&nbsp;More</i>

          </div>

      </section>

  </div> <!–end .music-head–>

 

  <ul class=”music-list”>  <!–Second list item: Contains a list of all songs displayed–>

      <li>

          <p>1. One Dance</p>

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

          <p>2:54</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

 

      <li>

          <p>2. Panda</p>

          <p>Cattee</p>

          <p>4:06</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

 

      <li>

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

          <p>Catin Cimberlake</p>

          <p>3:56</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

 

      <li>

          <p>4. Work From Home</p>

          <p>Cat Harmony feat Colla</p>

          <p>3:34</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

    </ul>

</section>  

      

</main>

  <body>

 

  <footer></footer> <!–to contain the music control buttons and song details–>

 

  </body>

</html>

شما اکنون در حال تبدیل شدن به یک نینجا Flexbox هستید. در مرحله بعدی ، خواهید دید که Flexbox چگونه می تواند در طراحی رسپانسیو کمک کند.

.content {
    display: flex;
    flex: 1 0 auto; /*this makes sure the section grows o fill the entire available space*/
    flex-direction: column;
}

.music-head {

  flex: ۰ ۰ ۲۸۰px; /*Same memo, don’t grow or shrink – stay at ۲۸۰px*/

  display: flex;

  padding: ۴۰px;

  background-color: #۴e4e4e;

}

.music-list {

  flex: ۱ ۰ auto;

  list-style-type: none;

  padding: ۵px ۱۰px ۰px;

}

.music-head دارای آلبوم هنری و سایر جزئیات مربوط به آلبوم است. یادداشت مشابه ، رشد نکنید یا کوچک نشوید اما ارتفاع ۲۸۰ پیکسل را حفظ کنید. قد؟ عرض نه؟ آره! عنصر والد قبلاً جهت انعطاف پذیری را تغییر داده بود. اوه ، بعداً شما نیز به این نیاز دارید تا یک ظرف فلکس باشد. بنابراین در display قرار دهید: flex .music-list لیستی از آهنگ ها را در خود نگه می دارد و فضای موجود باقی مانده با .music-head بالا را پر می کند. این هنوز خیلی زیبا نیست اما اگر هنوز هم دنبال می کنید عالی عمل می کنید. عالیه!

  html,
  body {
    height: 100%; /*setting this explicitly is important*/
  }
  body {
    display: flex; /*flex superpowers activated! */
    flex-direction: column; /*Stack the flex-items (main and footer elements) vertically NOT horizontally*/
    background-color: #fff;
    margin: 0;
    font-family: Lato, sans-serif;
    color: #222;
    font-size: 0.9em;
  }

    main {
  flex: 1 0 auto; /*was a flex item*/
  display: flex; /*I just included this! - now a flex container with flex items: sidebar & main content section*/
  }

  footer {
    flex: 0 0 90px; /*don't grow or shrink - just stay at a height of 90px.*/
     padding: 10px;
    color: #fff;
    background-color: rgba(61, 100, 158, .9);
  }

  aside {
    flex: 0 0 40px; /*as a flex item: do not grow or shrink. Just stay fixed at 40px*/
    display: flex; /*Now you're a flex-container, you can decide how your flex-items are laid*/
    flex-direction: column; /*Stack my flex-item's vertically...change the default direction*/
    justify-content: space-around; /*Interesting...since direction is changed, this works on the vertical direction*/
    align-items: center; /*direction is changed! This affects the horizontal direction*/
    background-color: #f2f2f2; /*make me pretty*/
  }

  /*font size for the icons*/
  aside i.fa {
    font-size: 0.9em;
  }

.content {
    display: flex;
    flex: 1 0 auto; /*this makes sure the section grows o fill the entire available space*/
    flex-direction: column;
}

.music-head {
  flex: 0 0 280px; /*Same memo, don't grow or shrink - stay at 280px*/
  display: flex;  
  padding: 40px;
  background-color: #4e4e4e;
}

.music-list {
    flex: 1 0 auto;
    list-style-type: none;
    padding: 5px 10px 0px;
}

<!DOCTYPE html>

  <html>

  <head>

  <title>Catty Music</title>

  </head>

    <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>

    <main>

  <aside> <!–This represents the sidebar and contained in it are icon sets from font-awesome–>

    <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>

  </aside>

<section class=”content”> <!–This section was empty. Populating it with content–>

  <div class=”music-head”> <!–First list item: contains music details–>

      <img src=”/udata/1mQ8VgpWlOk/cattyboard.jpg” /> <!–Album art–>

      <section class=”catty-music”> <!–other details of the album–>

          <div>

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

            <p>Unknown Artist</p>

            <p>2016 . Charts . ۱۰۰ songs</p>

          </div>

          <div> <!–Music controls–>

            <i class=”fa fa-play”> &nbsp;Play all</i>

            <i class=”fa fa-plus”> &nbsp;Add to</i>

            <i class=”fa fa-ellipsis-h”>&nbsp;&nbsp;More</i>

          </div>

      </section>

  </div> <!–end .music-head–>

  <ul class=”music-list”>  <!–Second list item: Contains a list of all songs displayed–>

      <li>

          <p>1. One Dance</p>

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

          <p>2:54</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

      <li>

          <p>2. Panda</p>

          <p>Cattee</p>

          <p>4:06</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

      <li>

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

          <p>Catin Cimberlake</p>

          <p>3:56</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

      <li>

          <p>4. Work From Home</p>

          <p>Cat Harmony feat Colla</p>

          <p>3:34</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

    </ul>

</section>

</main>

  <body>

  <footer></footer> <!–to contain the music control buttons and song details–>

  </body>

</html>

در اینجا چند مشکل وجود دارد. لیست آهنگ ها وحشتناک به نظر می رسد.

بخشی که شامل هنر موسیقی است متون واقعاً زشتی دارد.

باز هم ، من شما را در حل این مشکلات راهنمایی می کنم.

در زیر راه حل های پیشنهادی من آورده شده است.

پرداختن به لیست آهنگ ها

هر لیست از آهنگ ها شامل ۴ پاراگراف است. عنوان آهنگ ، هنرمند ، مدت زمان و “سینک ابر گربه ای”. باید راهی وجود داشته باشد که همه اینها را در یک سطر قرار دهد و هر پاراگراف فضای مساوی در این خط را اشغال کند. Flexbox به نجات ما می آید! مفهوم اینجا در بسیاری از سیستم های شبکه به کار رفته است. ترجمه آن را به کد.

li {

  display: flex; /*Targets each list containing the paragraphs*/

  padding: ۰ ۲۰px;

  min-height: ۵۰px;

}

li p {

  flex: ۰ ۰ ۲۵%; /*This is the sweet sauce*/

}

می بینید که آنجا برای پاراگراف ها چه اتفاقی می افتد؟ انعطاف پذیر: ۰ ۰ ۲۵٪ “رشد نکنید یا کوچک نشوید اما هر پاراگراف باید ۲۵٪ از فضای موجود را اشغال کند”. فضا به طور مساوی بین بندها تقسیم می شود.

  html,
  body {
    height: 100%; /*setting this explicitly is important*/
  }
li {
  display: flex; /*Targets each list containing the paragraphs*/
  padding: 0 20px;
  min-height: 50px;
}

li p {
  flex: 0 0 25%; /*This is the sweet sauce*/
}

  body {
    display: flex; /*flex superpowers activated! */
    flex-direction: column; /*Stack the flex-items (main and footer elements) vertically NOT horizontally*/
    background-color: #fff;
    margin: 0;
    font-family: Lato, sans-serif;
    color: #222;
    font-size: 0.9em;
  }

    main {
  flex: 1 0 auto; /*was a flex item*/
  display: flex; /*I just included this! - now a flex container with flex items: sidebar & main content section*/
  }

  footer {
    flex: 0 0 90px; /*don't grow or shrink - just stay at a height of 90px.*/
     padding: 10px;
    color: #fff;
    background-color: rgba(61, 100, 158, .9);
  }

  aside {
    flex: 0 0 40px; /*as a flex item: do not grow or shrink. Just stay fixed at 40px*/
    display: flex; /*Now you're a flex-container, you can decide how your flex-items are laid*/
    flex-direction: column; /*Stack my flex-item's vertically...change the default direction*/
    justify-content: space-around; /*Interesting...since direction is changed, this works on the vertical direction*/
    align-items: center; /*direction is changed! This affects the horizontal direction*/
    background-color: #f2f2f2; /*make me pretty*/
  }
  /*font size for the icons*/
  aside i.fa {
    font-size: 0.9em;
  }

.content {
    display: flex;
    flex: 1 0 auto; /*this makes sure the section grows o fill the entire available space*/
    flex-direction: column;
}

.music-head {
  flex: 0 0 280px; /*Same memo, don't grow or shrink - stay at 280px*/
  display: flex;  
  padding: 40px;
  background-color: #4e4e4e;
}

.music-list {
    flex: 1 0 auto;
    list-style-type: none;
    padding: 5px 10px 0px;
}

<!DOCTYPE html>

  <html>

  <head>

  <title>Catty Music</title>

  </head>

    <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>

    <main>

  <aside> <!–This represents the sidebar and contained in it are icon sets from font-awesome–>

    <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>

  </aside>

<section class=”content”> <!–This section was empty. Populating it with content–>

  <div class=”music-head”> <!–First list item: contains music details–>

      <img src=”/udata/1mQ8VgpWlOk/cattyboard.jpg” /> <!–Album art–>

      <section class=”catty-music”> <!–other details of the album–>

          <div>

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

            <p>Unknown Artist</p>

            <p>2016 . Charts . ۱۰۰ songs</p>

          </div>

          <div> <!–Music controls–>

            <i class=”fa fa-play”> &nbsp;Play all</i>

            <i class=”fa fa-plus”> &nbsp;Add to</i>

            <i class=”fa fa-ellipsis-h”>&nbsp;&nbsp;More</i>

          </div>

      </section>

  </div> <!–end .music-head–>

  <ul class=”music-list”>  <!–Second list item: Contains a list of all songs displayed–>

      <li>

          <p>1. One Dance</p>

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

          <p>2:54</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

      <li>

          <p>2. Panda</p>

          <p>Cattee</p>

          <p>4:06</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

      <li>

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

          <p>Catin Cimberlake</p>

          <p>3:56</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

      <li>

          <p>4. Work From Home</p>

          <p>Cat Harmony feat Colla</p>

          <p>3:34</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

    </ul>

</section>

</main>

  <body>

  <footer></footer> <!–to contain the music control buttons and song details–>

  </body>

</html>

با دادن رنگهای متناوب به لیستها ، کمی بیشتر استایل کنید و با برچسب “سینک ابری گربه ای” نیز برخورد کنید.

li span.catty-cloud {
  border: 1px solid black;
  font-size: 0.6em;
  padding: 3px;
}

li:nth-child(2n) {
  background-color: #f2f2f2;
}

بنابراین ، شما آن را می کشید و واقعاً بهتر می توانید زبان انعطاف پذیر را درک کنید! این همان چیزی است که اکنون باید داشته باشید.

  html,
  body {
    height: 100%; /*setting this explicitly is important*/
  }

li {
  display: flex; /*Targets each list containing the paragraphs*/
  padding: 0 20px;
  min-height: 50px;
}

li p {
  flex: 0 0 25%; /*This is the sweet sauce*/
}

li span.catty-cloud {
  border: 1px solid black;
  font-size: 0.6em;
  padding: 3px;
}

li:nth-child(2n) {
  background-color: #f2f2f2;
}
  body {
    display: flex; /*flex superpowers activated! */
    flex-direction: column; /*Stack the flex-items (main and footer elements) vertically NOT horizontally*/
    background-color: #fff;
    margin: 0;
    font-family: Lato, sans-serif;
    color: #222;
    font-size: 0.9em;
  }

    main {
  flex: 1 0 auto; /*was a flex item*/
  display: flex; /*I just included this! - now a flex container with flex items: sidebar & main content section*/
  }

  footer {
    flex: 0 0 90px; /*don't grow or shrink - just stay at a height of 90px.*/
     padding: 10px;
    color: #fff;
    background-color: rgba(61, 100, 158, .9);
  }
  aside {
    flex: 0 0 40px; /*as a flex item: do not grow or shrink. Just stay fixed at 40px*/
    display: flex; /*Now you're a flex-container, you can decide how your flex-items are laid*/
    flex-direction: column; /*Stack my flex-item's vertically...change the default direction*/
    justify-content: space-around; /*Interesting...since direction is changed, this works on the vertical direction*/
    align-items: center; /*direction is changed! This affects the horizontal direction*/
    background-color: #f2f2f2; /*make me pretty*/
  }

  /*font size for the icons*/
  aside i.fa {
    font-size: 0.9em;
  }

.content {
    display: flex;
    flex: 1 0 auto; /*this makes sure the section grows o fill the entire available space*/
    flex-direction: column;
}

.music-head {
  flex: 0 0 280px; /*Same memo, don't grow or shrink - stay at 280px*/
  display: flex;  
  padding: 40px;
  background-color: #4e4e4e;
}

.music-list {
    flex: 1 0 auto;
    list-style-type: none;
    padding: 5px 10px 0px;
}

<!DOCTYPE html>

  <html>

  <head>

  <title>Catty Music</title>

  </head>

    <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>

    <main>

  <aside> <!–This represents the sidebar and contained in it are icon sets from font-awesome–>

    <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>

  </aside>

 

<section class=”content”> <!–This section was empty. Populating it with content–>

 

  <div class=”music-head”> <!–First list item: contains music details–>

      <img src=”/udata/1mQ8VgpWlOk/cattyboard.jpg” /> <!–Album art–>

 

      <section class=”catty-music”> <!–other details of the album–>

          <div>

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

            <p>Unknown Artist</p>

            <p>2016 . Charts . ۱۰۰ songs</p>

          </div>

 

          <div> <!–Music controls–>

            <i class=”fa fa-play”> &nbsp;Play all</i>

            <i class=”fa fa-plus”> &nbsp;Add to</i>

            <i class=”fa fa-ellipsis-h”>&nbsp;&nbsp;More</i>

          </div>

      </section>

  </div> <!–end .music-head–>

 

  <ul class=”music-list”>  <!–Second list item: Contains a list of all songs displayed–>

      <li>

          <p>1. One Dance</p>

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

          <p>2:54</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

 

      <li>

          <p>2. Panda</p>

          <p>Cattee</p>

          <p>4:06</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

 

      <li>

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

          <p>Catin Cimberlake</p>

          <p>3:56</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

 

      <li>

          <p>4. Work From Home</p>

          <p>Cat Harmony feat Colla</p>

          <p>3:34</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

    </ul>

</section>  

      

</main>

  <body>

 

  <footer></footer> <!–to contain the music control buttons and song details–>

 

  </body>

</html>

از این تکنیک استفاده کنید

این تکنیک بسیار ارزشمند است. می توانید از آن برای ایجاد مناطق محتوای نابرابر استفاده کنید. بگویید ، یک نمای ۲ ستونی. یک بخش می تواند ۶۰٪ فضای موجود را اشغال کند و قسمت دیگر ۴۰٪ بخش اول: ۰ ۰ ۶۰٪؛ بخش دوم: ۰ ۰ ۴۰٪؛ شما می توانید از این روش برای ساخت سیستم های شبکه استفاده کنید. اکنون به مشکل دوم پرداخته خواهد شد.

زیباتر نشان دادن متن جزئیات آلبوم.

موارد بسیار ساده در زیر وجود دارد و تو این کار را کردی کار شما کاملاً تمام شده است.

.catty-music{
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  font-weight: 300;
  color: #fff;
  padding-left: 50px;
}

.catty-music div:nth-child(1){
  margin-bottom: auto;
}

.catty-music div:nth-child(2){
  margin-top: 0;
}

.catty-music div:nth-child(2) i.fa{
  font-size: 0.9em;
  padding: 0 0.7em;
  font-weight: 300;
}
.catty-music div:nth-child(1) p:first-child{
  font-size: 1.8em;
  margin: 0 0 10px;
}

.catty-music div:nth-child(1) p:not(:first-child){
  font-size: 0.9em;
  margin: 2px 0;
}

وای. باور نمی کنم شما به این مرحله رسیده باشید. عالیه!

  html,
  body {
    height: 100%; /*setting this explicitly is important*/
  }

li {
  display: flex; /*Targets each list containing the paragraphs*/
  padding: 0 20px;
  min-height: 50px;
}

li p {
  flex: 0 0 25%; /*This is the sweet sauce*/
}

li span.catty-cloud {
  border: 1px solid black;
  font-size: 0.6em;
  padding: 3px;
}

li:nth-child(2n) {
  background-color: #f2f2f2;
}

  body {
    display: flex; /*flex superpowers activated! */
    flex-direction: column; /*Stack the flex-items (main and footer elements) vertically NOT horizontally*/
    background-color: #fff;
    margin: 0;
    font-family: Lato, sans-serif;
    color: #222;
    font-size: 0.9em;
  }

    main {
  flex: 1 0 auto; /*was a flex item*/
  display: flex; /*I just included this! - now a flex container with flex items: sidebar & main content section*/
  }

  footer {
    flex: 0 0 90px; /*don't grow or shrink - just stay at a height of 90px.*/
     padding: 10px;
    color: #fff;
    background-color: rgba(61, 100, 158, .9);
  }

  aside {
    flex: 0 0 40px; /*as a flex item: do not grow or shrink. Just stay fixed at 40px*/
    display: flex; /*Now you're a flex-container, you can decide how your flex-items are laid*/
    flex-direction: column; /*Stack my flex-item's vertically...change the default direction*/
    justify-content: space-around; /*Interesting...since direction is changed, this works on the vertical direction*/
    align-items: center; /*direction is changed! This affects the horizontal direction*/
    background-color: #f2f2f2; /*make me pretty*/
  }

  /*font size for the icons*/
  aside i.fa {
    font-size: 0.9em;
  }

.content {
    display: flex;
    flex: 1 0 auto; /*this makes sure the section grows o fill the entire available space*/
    flex-direction: column;
}

.music-head {
  flex: 0 0 280px; /*Same memo, don't grow or shrink - stay at 280px*/
  display: flex;  
  padding: 40px;
  background-color: #4e4e4e;
}

.music-list {
    flex: 1 0 auto;
    list-style-type: none;
    padding: 5px 10px 0px;
}

.catty-music{
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  font-weight: 300;
  color: #fff;
  padding-left: 50px;
}

.catty-music div:nth-child(1){
  margin-bottom: auto;
}

.catty-music div:nth-child(2){
  margin-top: 0;
}

.catty-music div:nth-child(2) i.fa{
  font-size: 0.9em;
  padding: 0 0.7em;
  font-weight: 300;
}
.catty-music div:nth-child(1) p:first-child{
  font-size: 1.8em;
  margin: 0 0 10px;
}

.catty-music div:nth-child(1) p:not(:first-child){
  font-size: 0.9em;
  margin: 2px 0;
}

<!DOCTYPE html>

  <html>

  <head>

  <title>Catty Music</title>

  </head>

    <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>

    <main>

  <aside> <!–This represents the sidebar and contained in it are icon sets from font-awesome–>

    <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>

  </aside>

 

<section class=”content”> <!–This section was empty. Populating it with content–>

 

  <div class=”music-head”> <!–First list item: contains music details–>

 

      <img src=”/udata/1mQ8VgpWlOk/cattyboard.jpg” /> <!–Album art–>

 

      <section class=”catty-music”> <!–other details of the album–>

          <div>

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

            <p>Unknown Artist</p>

            <p>2016 . Charts . ۱۰۰ songs</p>

          </div>

 

          <div> <!–Music controls–>

            <i class=”fa fa-play”> &nbsp;Play all</i>

            <i class=”fa fa-plus”> &nbsp;Add to</i>

            <i class=”fa fa-ellipsis-h”>&nbsp;&nbsp;More</i>

          </div>

      </section>

  </div> <!–end .music-head–>

 

  <ul class=”music-list”>  <!–Second list item: Contains a list of all songs displayed–>

      <li>

          <p>1. One Dance</p>

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

          <p>2:54</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

 

      <li>

          <p>2. Panda</p>

          <p>Cattee</p>

          <p>4:06</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

 

      <li>

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

          <p>Catin Cimberlake</p>

          <p>3:56</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

 

      <li>

          <p>4. Work From Home</p>

          <p>Cat Harmony feat Colla</p>

          <p>3:34</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

    </ul>

</section>  

      

</main>

  <body>

 

  <footer></footer> <!–to contain the music control buttons and song details–>

 

  </body>

</html>

شما اکنون در حال تبدیل شدن به یک نینجا Flexbox هستید. در مرحله بعدی ، خواهید دید که Flexbox چگونه می تواند در طراحی رسپانسیو کمک کند.

  html,
  body {
    height: 100%; /*setting this explicitly is important*/
  }

  body {
    display: flex; /*flex superpowers activated! */
    flex-direction: column; /*Stack the flex-items (main and footer elements) vertically NOT horizontally*/
    background-color: #fff;
    margin: 0;
    font-family: Lato, sans-serif;
    color: #222;
    font-size: 0.9em;
  }

    main {
  flex: 1 0 auto; /*was a flex item*/
  display: flex; /*I just included this! - now a flex container with flex items: sidebar & main content section*/
  }
  footer {
    flex: 0 0 90px; /*don't grow or shrink - just stay at a height of 90px.*/
     padding: 10px;
    color: #fff;
    background-color: rgba(61, 100, 158, .9);
  }

  aside {
    flex: 0 0 40px; /*as a flex item: do not grow or shrink. Just stay fixed at 40px*/
    display: flex; /*Now you're a flex-container, you can decide how your flex-items are laid*/
    flex-direction: column; /*Stack my flex-item's vertically...change the default direction*/
    justify-content: space-around; /*Interesting...since direction is changed, this works on the vertical direction*/
    align-items: center; /*direction is changed! This affects the horizontal direction*/
    background-color: #f2f2f2; /*make me pretty*/
  }

  /*font size for the icons*/
  aside i.fa {
    font-size: 0.9em;
  }

<!DOCTYPE html>

  <html>

  <head>

  <title>Catty Music</title>

  </head>

    <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>

    <main>

  <aside> <!–This represents the sidebar and contained in it are icon sets from font-awesome–>

    <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>

  </aside>

  <section class=”content”> <!–This section will house everything other than the sidebar–>

  </section>

</main>

  <body>

  <main></main> <!–to contain the main section of the app–>

  <footer></footer> <!–to contain the music control buttons and song details–>

  </body>

</html>

افزودن محتوا به بخش اصلی.

قسمت محتوای اصلی خالی است اما مورد دوم را فراموش نکنید. نوار کناری اول است. مقداری محتوی در آنجا قرار دهید. شما چی فکر میکنید؟ ممکن است دوباره به پروژه به پایان رسیده نگاهی بیندازید ، بنابراین فراموش نکنید که به کجا می رویم. مهمتر از همه ، این به شما کمک می کند لیست کد بعدی را درک کنید.

<section class=”content”> <!–This section was empty. Populating it with content–>

  <div class=”music-head”> <!–First list item: contains music details–>

      <img src=”images/cattyboard.jpg” /> <!–Album art–>

      <section class=”catty-music”> <!–other details of the album–>

          <div>

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

            <p>Unknown Artist</p>

            <p>2016 . Charts . ۱۰۰ songs</p>

          </div>

          <div> <!–Music controls–>

            <i class=”fa fa-play”> &nbsp;Play all</i>

            <i class=”fa fa-plus”> &nbsp;Add to</i>

            <i class=”fa fa-ellipsis-h”>&nbsp;&nbsp;More</i>

          </div>

      </section>

  </div> <!–end .music-head–>

  <ul class=”music-list”>  <!–Second list item: Contains a list of all songs displayed–>

      <li>

          <p>1. One Dance</p>

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

          <p>2:54</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

      <li>

          <p>2. Panda</p>

          <p>Cattee</p>

          <p>4:06</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

      <li>

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

          <p>Catin Cimberlake</p>

          <p>3:56</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

      <li>

          <p>4. Work From Home</p>

          <p>Cat Harmony feat Colla</p>

          <p>3:34</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

    </ul>

</section>

اهم ، من کمی بیشتر از دفعه گذشته اضافه کردم اما بسیار ساده است. من قسمت محتوای خالی را با یک div جمع کردم که شامل آلبوم و برخی از جزئیات آلبوم گربه است. لیست نامرتب چطور؟ ul لیستی از آهنگ های آلبوم را در اختیار دارد. عنوان آهنگ ، هنرمند ، زمان و “سینک ابری گربه ای” در پاراگراف های جداگانه موجود در لیست موجود است. بنابراین شما با یک ظاهر طراحی شده چه کاری انجام می دهید؟ ببین من چیکار کردم آیا میتوانی حلش کنی؟ اول از همه ، شما باید قسمت اصلی مطالب را یک ظرف فلکس کنید.

.content {
    display: flex;
    flex: 1 0 auto; /*this makes sure the section grows o fill the entire available space*/
    flex-direction: column;
}

.music-head {

  flex: ۰ ۰ ۲۸۰px; /*Same memo, don’t grow or shrink – stay at ۲۸۰px*/

  display: flex;

  padding: ۴۰px;

  background-color: #۴e4e4e;

}

.music-list {

  flex: ۱ ۰ auto;

  list-style-type: none;

  padding: ۵px ۱۰px ۰px;

}

.music-head دارای آلبوم هنری و سایر جزئیات مربوط به آلبوم است. یادداشت مشابه ، رشد نکنید یا کوچک نشوید اما ارتفاع ۲۸۰ پیکسل را حفظ کنید. قد؟ عرض نه؟ آره! عنصر والد قبلاً جهت انعطاف پذیری را تغییر داده بود. اوه ، بعداً شما نیز به این نیاز دارید تا یک ظرف فلکس باشد. بنابراین در display قرار دهید: flex .music-list لیستی از آهنگ ها را در خود نگه می دارد و فضای موجود باقی مانده با .music-head بالا را پر می کند. این هنوز خیلی زیبا نیست اما اگر هنوز هم دنبال می کنید عالی عمل می کنید. عالیه!

  html,
  body {
    height: 100%; /*setting this explicitly is important*/
  }
  body {
    display: flex; /*flex superpowers activated! */
    flex-direction: column; /*Stack the flex-items (main and footer elements) vertically NOT horizontally*/
    background-color: #fff;
    margin: 0;
    font-family: Lato, sans-serif;
    color: #222;
    font-size: 0.9em;
  }

    main {
  flex: 1 0 auto; /*was a flex item*/
  display: flex; /*I just included this! - now a flex container with flex items: sidebar & main content section*/
  }

  footer {
    flex: 0 0 90px; /*don't grow or shrink - just stay at a height of 90px.*/
     padding: 10px;
    color: #fff;
    background-color: rgba(61, 100, 158, .9);
  }

  aside {
    flex: 0 0 40px; /*as a flex item: do not grow or shrink. Just stay fixed at 40px*/
    display: flex; /*Now you're a flex-container, you can decide how your flex-items are laid*/
    flex-direction: column; /*Stack my flex-item's vertically...change the default direction*/
    justify-content: space-around; /*Interesting...since direction is changed, this works on the vertical direction*/
    align-items: center; /*direction is changed! This affects the horizontal direction*/
    background-color: #f2f2f2; /*make me pretty*/
  }

  /*font size for the icons*/
  aside i.fa {
    font-size: 0.9em;
  }

.content {
    display: flex;
    flex: 1 0 auto; /*this makes sure the section grows o fill the entire available space*/
    flex-direction: column;
}

.music-head {
  flex: 0 0 280px; /*Same memo, don't grow or shrink - stay at 280px*/
  display: flex;  
  padding: 40px;
  background-color: #4e4e4e;
}

.music-list {
    flex: 1 0 auto;
    list-style-type: none;
    padding: 5px 10px 0px;
}

<!DOCTYPE html>

  <html>

  <head>

  <title>Catty Music</title>

  </head>

    <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>

    <main>

  <aside> <!–This represents the sidebar and contained in it are icon sets from font-awesome–>

    <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>

  </aside>

<section class=”content”> <!–This section was empty. Populating it with content–>

  <div class=”music-head”> <!–First list item: contains music details–>

      <img src=”/udata/1mQ8VgpWlOk/cattyboard.jpg” /> <!–Album art–>

      <section class=”catty-music”> <!–other details of the album–>

          <div>

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

            <p>Unknown Artist</p>

            <p>2016 . Charts . ۱۰۰ songs</p>

          </div>

          <div> <!–Music controls–>

            <i class=”fa fa-play”> &nbsp;Play all</i>

            <i class=”fa fa-plus”> &nbsp;Add to</i>

            <i class=”fa fa-ellipsis-h”>&nbsp;&nbsp;More</i>

          </div>

      </section>

  </div> <!–end .music-head–>

  <ul class=”music-list”>  <!–Second list item: Contains a list of all songs displayed–>

      <li>

          <p>1. One Dance</p>

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

          <p>2:54</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

      <li>

          <p>2. Panda</p>

          <p>Cattee</p>

          <p>4:06</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

      <li>

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

          <p>Catin Cimberlake</p>

          <p>3:56</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

      <li>

          <p>4. Work From Home</p>

          <p>Cat Harmony feat Colla</p>

          <p>3:34</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

    </ul>

</section>

</main>

  <body>

  <footer></footer> <!–to contain the music control buttons and song details–>

  </body>

</html>

در اینجا چند مشکل وجود دارد. لیست آهنگ ها وحشتناک به نظر می رسد.

بخشی که شامل هنر موسیقی است متون واقعاً زشتی دارد.

باز هم ، من شما را در حل این مشکلات راهنمایی می کنم.

در زیر راه حل های پیشنهادی من آورده شده است.

پرداختن به لیست آهنگ ها

هر لیست از آهنگ ها شامل ۴ پاراگراف است. عنوان آهنگ ، هنرمند ، مدت زمان و “سینک ابر گربه ای”. باید راهی وجود داشته باشد که همه اینها را در یک سطر قرار دهد و هر پاراگراف فضای مساوی در این خط را اشغال کند. Flexbox به نجات ما می آید! مفهوم اینجا در بسیاری از سیستم های شبکه به کار رفته است. ترجمه آن را به کد.

li {

  display: flex; /*Targets each list containing the paragraphs*/

  padding: ۰ ۲۰px;

  min-height: ۵۰px;

}

li p {

  flex: ۰ ۰ ۲۵%; /*This is the sweet sauce*/

}

می بینید که آنجا برای پاراگراف ها چه اتفاقی می افتد؟ انعطاف پذیر: ۰ ۰ ۲۵٪ “رشد نکنید یا کوچک نشوید اما هر پاراگراف باید ۲۵٪ از فضای موجود را اشغال کند”. فضا به طور مساوی بین بندها تقسیم می شود.

  html,
  body {
    height: 100%; /*setting this explicitly is important*/
  }
li {
  display: flex; /*Targets each list containing the paragraphs*/
  padding: 0 20px;
  min-height: 50px;
}

li p {
  flex: 0 0 25%; /*This is the sweet sauce*/
}

  body {
    display: flex; /*flex superpowers activated! */
    flex-direction: column; /*Stack the flex-items (main and footer elements) vertically NOT horizontally*/
    background-color: #fff;
    margin: 0;
    font-family: Lato, sans-serif;
    color: #222;
    font-size: 0.9em;
  }

    main {
  flex: 1 0 auto; /*was a flex item*/
  display: flex; /*I just included this! - now a flex container with flex items: sidebar & main content section*/
  }

  footer {
    flex: 0 0 90px; /*don't grow or shrink - just stay at a height of 90px.*/
     padding: 10px;
    color: #fff;
    background-color: rgba(61, 100, 158, .9);
  }

  aside {
    flex: 0 0 40px; /*as a flex item: do not grow or shrink. Just stay fixed at 40px*/
    display: flex; /*Now you're a flex-container, you can decide how your flex-items are laid*/
    flex-direction: column; /*Stack my flex-item's vertically...change the default direction*/
    justify-content: space-around; /*Interesting...since direction is changed, this works on the vertical direction*/
    align-items: center; /*direction is changed! This affects the horizontal direction*/
    background-color: #f2f2f2; /*make me pretty*/
  }
  /*font size for the icons*/
  aside i.fa {
    font-size: 0.9em;
  }

.content {
    display: flex;
    flex: 1 0 auto; /*this makes sure the section grows o fill the entire available space*/
    flex-direction: column;
}

.music-head {
  flex: 0 0 280px; /*Same memo, don't grow or shrink - stay at 280px*/
  display: flex;  
  padding: 40px;
  background-color: #4e4e4e;
}

.music-list {
    flex: 1 0 auto;
    list-style-type: none;
    padding: 5px 10px 0px;
}

<!DOCTYPE html>

  <html>

  <head>

  <title>Catty Music</title>

  </head>

    <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>

    <main>

  <aside> <!–This represents the sidebar and contained in it are icon sets from font-awesome–>

    <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>

  </aside>

<section class=”content”> <!–This section was empty. Populating it with content–>

  <div class=”music-head”> <!–First list item: contains music details–>

      <img src=”/udata/1mQ8VgpWlOk/cattyboard.jpg” /> <!–Album art–>

      <section class=”catty-music”> <!–other details of the album–>

          <div>

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

            <p>Unknown Artist</p>

            <p>2016 . Charts . ۱۰۰ songs</p>

          </div>

          <div> <!–Music controls–>

            <i class=”fa fa-play”> &nbsp;Play all</i>

            <i class=”fa fa-plus”> &nbsp;Add to</i>

            <i class=”fa fa-ellipsis-h”>&nbsp;&nbsp;More</i>

          </div>

      </section>

  </div> <!–end .music-head–>

  <ul class=”music-list”>  <!–Second list item: Contains a list of all songs displayed–>

      <li>

          <p>1. One Dance</p>

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

          <p>2:54</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

      <li>

          <p>2. Panda</p>

          <p>Cattee</p>

          <p>4:06</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

      <li>

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

          <p>Catin Cimberlake</p>

          <p>3:56</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

      <li>

          <p>4. Work From Home</p>

          <p>Cat Harmony feat Colla</p>

          <p>3:34</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

    </ul>

</section>

</main>

  <body>

  <footer></footer> <!–to contain the music control buttons and song details–>

  </body>

</html>

با دادن رنگهای متناوب به لیستها ، کمی بیشتر استایل کنید و با برچسب “سینک ابری گربه ای” نیز برخورد کنید.

li span.catty-cloud {
  border: 1px solid black;
  font-size: 0.6em;
  padding: 3px;
}

li:nth-child(2n) {
  background-color: #f2f2f2;
}

بنابراین ، شما آن را می کشید و واقعاً بهتر می توانید زبان انعطاف پذیر را درک کنید! این همان چیزی است که اکنون باید داشته باشید.

  html,
  body {
    height: 100%; /*setting this explicitly is important*/
  }

li {
  display: flex; /*Targets each list containing the paragraphs*/
  padding: 0 20px;
  min-height: 50px;
}

li p {
  flex: 0 0 25%; /*This is the sweet sauce*/
}

li span.catty-cloud {
  border: 1px solid black;
  font-size: 0.6em;
  padding: 3px;
}

li:nth-child(2n) {
  background-color: #f2f2f2;
}
  body {
    display: flex; /*flex superpowers activated! */
    flex-direction: column; /*Stack the flex-items (main and footer elements) vertically NOT horizontally*/
    background-color: #fff;
    margin: 0;
    font-family: Lato, sans-serif;
    color: #222;
    font-size: 0.9em;
  }

    main {
  flex: 1 0 auto; /*was a flex item*/
  display: flex; /*I just included this! - now a flex container with flex items: sidebar & main content section*/
  }

  footer {
    flex: 0 0 90px; /*don't grow or shrink - just stay at a height of 90px.*/
     padding: 10px;
    color: #fff;
    background-color: rgba(61, 100, 158, .9);
  }
  aside {
    flex: 0 0 40px; /*as a flex item: do not grow or shrink. Just stay fixed at 40px*/
    display: flex; /*Now you're a flex-container, you can decide how your flex-items are laid*/
    flex-direction: column; /*Stack my flex-item's vertically...change the default direction*/
    justify-content: space-around; /*Interesting...since direction is changed, this works on the vertical direction*/
    align-items: center; /*direction is changed! This affects the horizontal direction*/
    background-color: #f2f2f2; /*make me pretty*/
  }

  /*font size for the icons*/
  aside i.fa {
    font-size: 0.9em;
  }

.content {
    display: flex;
    flex: 1 0 auto; /*this makes sure the section grows o fill the entire available space*/
    flex-direction: column;
}

.music-head {
  flex: 0 0 280px; /*Same memo, don't grow or shrink - stay at 280px*/
  display: flex;  
  padding: 40px;
  background-color: #4e4e4e;
}

.music-list {
    flex: 1 0 auto;
    list-style-type: none;
    padding: 5px 10px 0px;
}

<!DOCTYPE html>

  <html>

  <head>

  <title>Catty Music</title>

  </head>

    <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>

    <main>

  <aside> <!–This represents the sidebar and contained in it are icon sets from font-awesome–>

    <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>

  </aside>

 

<section class=”content”> <!–This section was empty. Populating it with content–>

 

  <div class=”music-head”> <!–First list item: contains music details–>

      <img src=”/udata/1mQ8VgpWlOk/cattyboard.jpg” /> <!–Album art–>

 

      <section class=”catty-music”> <!–other details of the album–>

          <div>

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

            <p>Unknown Artist</p>

            <p>2016 . Charts . ۱۰۰ songs</p>

          </div>

 

          <div> <!–Music controls–>

            <i class=”fa fa-play”> &nbsp;Play all</i>

            <i class=”fa fa-plus”> &nbsp;Add to</i>

            <i class=”fa fa-ellipsis-h”>&nbsp;&nbsp;More</i>

          </div>

      </section>

  </div> <!–end .music-head–>

 

  <ul class=”music-list”>  <!–Second list item: Contains a list of all songs displayed–>

      <li>

          <p>1. One Dance</p>

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

          <p>2:54</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

 

      <li>

          <p>2. Panda</p>

          <p>Cattee</p>

          <p>4:06</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

 

      <li>

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

          <p>Catin Cimberlake</p>

          <p>3:56</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

 

      <li>

          <p>4. Work From Home</p>

          <p>Cat Harmony feat Colla</p>

          <p>3:34</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

    </ul>

</section>  

      

</main>

  <body>

 

  <footer></footer> <!–to contain the music control buttons and song details–>

 

  </body>

</html>

از این تکنیک استفاده کنید

این تکنیک بسیار ارزشمند است. می توانید از آن برای ایجاد مناطق محتوای نابرابر استفاده کنید. بگویید ، یک نمای ۲ ستونی. یک بخش می تواند ۶۰٪ فضای موجود را اشغال کند و قسمت دیگر ۴۰٪ بخش اول: ۰ ۰ ۶۰٪؛ بخش دوم: ۰ ۰ ۴۰٪؛ شما می توانید از این روش برای ساخت سیستم های شبکه استفاده کنید. اکنون به مشکل دوم پرداخته خواهد شد.

زیباتر نشان دادن متن جزئیات آلبوم.

موارد بسیار ساده در زیر وجود دارد و تو این کار را کردی کار شما کاملاً تمام شده است.

.catty-music{
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  font-weight: 300;
  color: #fff;
  padding-left: 50px;
}

.catty-music div:nth-child(1){
  margin-bottom: auto;
}

.catty-music div:nth-child(2){
  margin-top: 0;
}

.catty-music div:nth-child(2) i.fa{
  font-size: 0.9em;
  padding: 0 0.7em;
  font-weight: 300;
}
.catty-music div:nth-child(1) p:first-child{
  font-size: 1.8em;
  margin: 0 0 10px;
}

.catty-music div:nth-child(1) p:not(:first-child){
  font-size: 0.9em;
  margin: 2px 0;
}

وای. باور نمی کنم شما به این مرحله رسیده باشید. عالیه!

  html,
  body {
    height: 100%; /*setting this explicitly is important*/
  }

li {
  display: flex; /*Targets each list containing the paragraphs*/
  padding: 0 20px;
  min-height: 50px;
}

li p {
  flex: 0 0 25%; /*This is the sweet sauce*/
}

li span.catty-cloud {
  border: 1px solid black;
  font-size: 0.6em;
  padding: 3px;
}

li:nth-child(2n) {
  background-color: #f2f2f2;
}

  body {
    display: flex; /*flex superpowers activated! */
    flex-direction: column; /*Stack the flex-items (main and footer elements) vertically NOT horizontally*/
    background-color: #fff;
    margin: 0;
    font-family: Lato, sans-serif;
    color: #222;
    font-size: 0.9em;
  }

    main {
  flex: 1 0 auto; /*was a flex item*/
  display: flex; /*I just included this! - now a flex container with flex items: sidebar & main content section*/
  }

  footer {
    flex: 0 0 90px; /*don't grow or shrink - just stay at a height of 90px.*/
     padding: 10px;
    color: #fff;
    background-color: rgba(61, 100, 158, .9);
  }

  aside {
    flex: 0 0 40px; /*as a flex item: do not grow or shrink. Just stay fixed at 40px*/
    display: flex; /*Now you're a flex-container, you can decide how your flex-items are laid*/
    flex-direction: column; /*Stack my flex-item's vertically...change the default direction*/
    justify-content: space-around; /*Interesting...since direction is changed, this works on the vertical direction*/
    align-items: center; /*direction is changed! This affects the horizontal direction*/
    background-color: #f2f2f2; /*make me pretty*/
  }

  /*font size for the icons*/
  aside i.fa {
    font-size: 0.9em;
  }

.content {
    display: flex;
    flex: 1 0 auto; /*this makes sure the section grows o fill the entire available space*/
    flex-direction: column;
}

.music-head {
  flex: 0 0 280px; /*Same memo, don't grow or shrink - stay at 280px*/
  display: flex;  
  padding: 40px;
  background-color: #4e4e4e;
}

.music-list {
    flex: 1 0 auto;
    list-style-type: none;
    padding: 5px 10px 0px;
}

.catty-music{
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  font-weight: 300;
  color: #fff;
  padding-left: 50px;
}

.catty-music div:nth-child(1){
  margin-bottom: auto;
}

.catty-music div:nth-child(2){
  margin-top: 0;
}

.catty-music div:nth-child(2) i.fa{
  font-size: 0.9em;
  padding: 0 0.7em;
  font-weight: 300;
}
.catty-music div:nth-child(1) p:first-child{
  font-size: 1.8em;
  margin: 0 0 10px;
}

.catty-music div:nth-child(1) p:not(:first-child){
  font-size: 0.9em;
  margin: 2px 0;
}

<!DOCTYPE html>

  <html>

  <head>

  <title>Catty Music</title>

  </head>

    <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>

    <main>

  <aside> <!–This represents the sidebar and contained in it are icon sets from font-awesome–>

    <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>

  </aside>

 

<section class=”content”> <!–This section was empty. Populating it with content–>

 

  <div class=”music-head”> <!–First list item: contains music details–>

 

      <img src=”/udata/1mQ8VgpWlOk/cattyboard.jpg” /> <!–Album art–>

 

      <section class=”catty-music”> <!–other details of the album–>

          <div>

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

            <p>Unknown Artist</p>

            <p>2016 . Charts . ۱۰۰ songs</p>

          </div>

 

          <div> <!–Music controls–>

            <i class=”fa fa-play”> &nbsp;Play all</i>

            <i class=”fa fa-plus”> &nbsp;Add to</i>

            <i class=”fa fa-ellipsis-h”>&nbsp;&nbsp;More</i>

          </div>

      </section>

  </div> <!–end .music-head–>

 

  <ul class=”music-list”>  <!–Second list item: Contains a list of all songs displayed–>

      <li>

          <p>1. One Dance</p>

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

          <p>2:54</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

 

      <li>

          <p>2. Panda</p>

          <p>Cattee</p>

          <p>4:06</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

 

      <li>

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

          <p>Catin Cimberlake</p>

          <p>3:56</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

 

      <li>

          <p>4. Work From Home</p>

          <p>Cat Harmony feat Colla</p>

          <p>3:34</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

    </ul>

</section>  

      

</main>

  <body>

 

  <footer></footer> <!–to contain the music control buttons and song details–>

 

  </body>

</html>

شما اکنون در حال تبدیل شدن به یک نینجا Flexbox هستید. در مرحله بعدی ، خواهید دید که Flexbox چگونه می تواند در طراحی رسپانسیو کمک کند.

  html,
  body {
    height: 100%; /*setting this explicitly is important*/
  }

  body {
    display: flex; /*flex superpowers activated! */
    flex-direction: column; /*Stack the flex-items (main and footer elements) vertically NOT horizontally*/
    background-color: #fff;
    margin: 0;
    font-family: Lato, sans-serif;
    color: #222;
    font-size: 0.9em;
  }

  main {
    flex: 1 0 auto; /*fill the available space*/
  }

  footer {
    flex: 0 0 90px; /*don't grow or shrink - just stay at a height of 90px.*/
     padding: 10px;
    color: #fff;
    background-color: rgba(61, 100, 158, .9);
  }

<!DOCTYPE html>

  <html>

  <head>

  <title>Catty Music</title>

  </head>

  <body>

  <main></main> <!–to contain the main section of the app–>

  <footer></footer> <!–to contain the music control buttons and song details–>

  </body>

</html>

با دیدن و لمس اینکه چگونه اوضاع شروع به شکل گیری می کند ، آن را حتی بهتر خواهید کرد. سند html را به روز کنید.

<main>

  <aside> <!–This represents the sidebar and contained in it are icon sets from font-awesome–>

    <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>

  </aside>

  <section class=”content”> <!–This section will house everything other than the sidebar–>

  </section>

</main>

لیست بالا کاملاً توضیحی است. برای مجموعه نمادها ، من از کتابخانه محبوب Font Awesome استفاده می کنم. داشتن نماد مورد نظر خود به سادگی اضافه کردن کلاس CSS ساده است. این همان کاری است که من در تگ aside انجام داده ام. همانطور که قبلا توضیح داده شد ، بخش “اصلی” در بالا نیز یک ظرف فلکس می باشد. نوار کناری (نشان داده شده توسط تگ aside) ، و این بخش موارد منعطفی خواهد بود.

  main {

  flex: ۱ ۰ auto; /*was a flex item*/

  display: flex; /*I just included this! – now a flex container with flex items: sidebar & main content section*/

  }

خوب ، این جالب می شود ، ها؟ اکنون قسمت اصلی را به عنوان یک ظرف فلکس در اختیار دارید. با یکی از موارد فلکس آن ، نوار کناری کنار بیایید. اینجا یک اتفاق جالب رخ داده است نوار کناری دارای نمادهایی است که به صورت عمودی روی هم چیده شده اند. می توانید یک ظرف فلکس را کنار بگذارید و یک جهت فلکس به آن بدهید که به شما اجازه می دهد همه آیکون ها به صورت عمودی و در جای خود قرار بگیرند. در زیر توضیح داده شده است.

  aside {

    flex: ۰ ۰ ۴۰px; /*as a flex item: do not grow or shrink. Just stay fixed at ۴۰px*/

    display: flex; /*Now you’re a flex-container, you can decide how your flex-items are laid*/

    flex-direction: column; /*Stack my flex-item’s vertically…change the default direction*/

    justify-content: space-around; /*Interesting…since direction is changed, this works on the vertical direction*/

    align-items: center; /*direction is changed! This affects the horizontal direction*/

    background-color: #f2f2f2; /*make me pretty*/

  }

  /*font size for the icons*/

  aside i.fa {

    font-size: ۰٫۹em;

  }

من با وسواس از طریق کد بالا نظر داده ام و اکنون می بینم که همه چیز چقدر زیبا است. فوق العاده شسته و رفته با چند خط کد. کدهای منطقی و هیچ هک کثیف.

  html,
  body {
    height: 100%; /*setting this explicitly is important*/
  }

  body {
    display: flex; /*flex superpowers activated! */
    flex-direction: column; /*Stack the flex-items (main and footer elements) vertically NOT horizontally*/
    background-color: #fff;
    margin: 0;
    font-family: Lato, sans-serif;
    color: #222;
    font-size: 0.9em;
  }

    main {
  flex: 1 0 auto; /*was a flex item*/
  display: flex; /*I just included this! - now a flex container with flex items: sidebar & main content section*/
  }
  footer {
    flex: 0 0 90px; /*don't grow or shrink - just stay at a height of 90px.*/
     padding: 10px;
    color: #fff;
    background-color: rgba(61, 100, 158, .9);
  }

  aside {
    flex: 0 0 40px; /*as a flex item: do not grow or shrink. Just stay fixed at 40px*/
    display: flex; /*Now you're a flex-container, you can decide how your flex-items are laid*/
    flex-direction: column; /*Stack my flex-item's vertically...change the default direction*/
    justify-content: space-around; /*Interesting...since direction is changed, this works on the vertical direction*/
    align-items: center; /*direction is changed! This affects the horizontal direction*/
    background-color: #f2f2f2; /*make me pretty*/
  }

  /*font size for the icons*/
  aside i.fa {
    font-size: 0.9em;
  }

<!DOCTYPE html>

  <html>

  <head>

  <title>Catty Music</title>

  </head>

    <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>

    <main>

  <aside> <!–This represents the sidebar and contained in it are icon sets from font-awesome–>

    <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>

  </aside>

  <section class=”content”> <!–This section will house everything other than the sidebar–>

  </section>

</main>

  <body>

  <main></main> <!–to contain the main section of the app–>

  <footer></footer> <!–to contain the music control buttons and song details–>

  </body>

</html>

افزودن محتوا به بخش اصلی.

قسمت محتوای اصلی خالی است اما مورد دوم را فراموش نکنید. نوار کناری اول است. مقداری محتوی در آنجا قرار دهید. شما چی فکر میکنید؟ ممکن است دوباره به پروژه به پایان رسیده نگاهی بیندازید ، بنابراین فراموش نکنید که به کجا می رویم. مهمتر از همه ، این به شما کمک می کند لیست کد بعدی را درک کنید.

<section class=”content”> <!–This section was empty. Populating it with content–>

  <div class=”music-head”> <!–First list item: contains music details–>

      <img src=”images/cattyboard.jpg” /> <!–Album art–>

      <section class=”catty-music”> <!–other details of the album–>

          <div>

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

            <p>Unknown Artist</p>

            <p>2016 . Charts . ۱۰۰ songs</p>

          </div>

          <div> <!–Music controls–>

            <i class=”fa fa-play”> &nbsp;Play all</i>

            <i class=”fa fa-plus”> &nbsp;Add to</i>

            <i class=”fa fa-ellipsis-h”>&nbsp;&nbsp;More</i>

          </div>

      </section>

  </div> <!–end .music-head–>

  <ul class=”music-list”>  <!–Second list item: Contains a list of all songs displayed–>

      <li>

          <p>1. One Dance</p>

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

          <p>2:54</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

      <li>

          <p>2. Panda</p>

          <p>Cattee</p>

          <p>4:06</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

      <li>

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

          <p>Catin Cimberlake</p>

          <p>3:56</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

      <li>

          <p>4. Work From Home</p>

          <p>Cat Harmony feat Colla</p>

          <p>3:34</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

    </ul>

</section>

اهم ، من کمی بیشتر از دفعه گذشته اضافه کردم اما بسیار ساده است. من قسمت محتوای خالی را با یک div جمع کردم که شامل آلبوم و برخی از جزئیات آلبوم گربه است. لیست نامرتب چطور؟ ul لیستی از آهنگ های آلبوم را در اختیار دارد. عنوان آهنگ ، هنرمند ، زمان و “سینک ابری گربه ای” در پاراگراف های جداگانه موجود در لیست موجود است. بنابراین شما با یک ظاهر طراحی شده چه کاری انجام می دهید؟ ببین من چیکار کردم آیا میتوانی حلش کنی؟ اول از همه ، شما باید قسمت اصلی مطالب را یک ظرف فلکس کنید.

.content {
    display: flex;
    flex: 1 0 auto; /*this makes sure the section grows o fill the entire available space*/
    flex-direction: column;
}

.music-head {

  flex: ۰ ۰ ۲۸۰px; /*Same memo, don’t grow or shrink – stay at ۲۸۰px*/

  display: flex;

  padding: ۴۰px;

  background-color: #۴e4e4e;

}

.music-list {

  flex: ۱ ۰ auto;

  list-style-type: none;

  padding: ۵px ۱۰px ۰px;

}

.music-head دارای آلبوم هنری و سایر جزئیات مربوط به آلبوم است. یادداشت مشابه ، رشد نکنید یا کوچک نشوید اما ارتفاع ۲۸۰ پیکسل را حفظ کنید. قد؟ عرض نه؟ آره! عنصر والد قبلاً جهت انعطاف پذیری را تغییر داده بود. اوه ، بعداً شما نیز به این نیاز دارید تا یک ظرف فلکس باشد. بنابراین در display قرار دهید: flex .music-list لیستی از آهنگ ها را در خود نگه می دارد و فضای موجود باقی مانده با .music-head بالا را پر می کند. این هنوز خیلی زیبا نیست اما اگر هنوز هم دنبال می کنید عالی عمل می کنید. عالیه!

  html,
  body {
    height: 100%; /*setting this explicitly is important*/
  }
  body {
    display: flex; /*flex superpowers activated! */
    flex-direction: column; /*Stack the flex-items (main and footer elements) vertically NOT horizontally*/
    background-color: #fff;
    margin: 0;
    font-family: Lato, sans-serif;
    color: #222;
    font-size: 0.9em;
  }

    main {
  flex: 1 0 auto; /*was a flex item*/
  display: flex; /*I just included this! - now a flex container with flex items: sidebar & main content section*/
  }

  footer {
    flex: 0 0 90px; /*don't grow or shrink - just stay at a height of 90px.*/
     padding: 10px;
    color: #fff;
    background-color: rgba(61, 100, 158, .9);
  }

  aside {
    flex: 0 0 40px; /*as a flex item: do not grow or shrink. Just stay fixed at 40px*/
    display: flex; /*Now you're a flex-container, you can decide how your flex-items are laid*/
    flex-direction: column; /*Stack my flex-item's vertically...change the default direction*/
    justify-content: space-around; /*Interesting...since direction is changed, this works on the vertical direction*/
    align-items: center; /*direction is changed! This affects the horizontal direction*/
    background-color: #f2f2f2; /*make me pretty*/
  }

  /*font size for the icons*/
  aside i.fa {
    font-size: 0.9em;
  }

.content {
    display: flex;
    flex: 1 0 auto; /*this makes sure the section grows o fill the entire available space*/
    flex-direction: column;
}

.music-head {
  flex: 0 0 280px; /*Same memo, don't grow or shrink - stay at 280px*/
  display: flex;  
  padding: 40px;
  background-color: #4e4e4e;
}

.music-list {
    flex: 1 0 auto;
    list-style-type: none;
    padding: 5px 10px 0px;
}

<!DOCTYPE html>

  <html>

  <head>

  <title>Catty Music</title>

  </head>

    <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>

    <main>

  <aside> <!–This represents the sidebar and contained in it are icon sets from font-awesome–>

    <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>

  </aside>

<section class=”content”> <!–This section was empty. Populating it with content–>

  <div class=”music-head”> <!–First list item: contains music details–>

      <img src=”/udata/1mQ8VgpWlOk/cattyboard.jpg” /> <!–Album art–>

      <section class=”catty-music”> <!–other details of the album–>

          <div>

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

            <p>Unknown Artist</p>

            <p>2016 . Charts . ۱۰۰ songs</p>

          </div>

          <div> <!–Music controls–>

            <i class=”fa fa-play”> &nbsp;Play all</i>

            <i class=”fa fa-plus”> &nbsp;Add to</i>

            <i class=”fa fa-ellipsis-h”>&nbsp;&nbsp;More</i>

          </div>

      </section>

  </div> <!–end .music-head–>

  <ul class=”music-list”>  <!–Second list item: Contains a list of all songs displayed–>

      <li>

          <p>1. One Dance</p>

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

          <p>2:54</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

      <li>

          <p>2. Panda</p>

          <p>Cattee</p>

          <p>4:06</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

      <li>

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

          <p>Catin Cimberlake</p>

          <p>3:56</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

      <li>

          <p>4. Work From Home</p>

          <p>Cat Harmony feat Colla</p>

          <p>3:34</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

    </ul>

</section>

</main>

  <body>

  <footer></footer> <!–to contain the music control buttons and song details–>

  </body>

</html>

در اینجا چند مشکل وجود دارد. لیست آهنگ ها وحشتناک به نظر می رسد.

بخشی که شامل هنر موسیقی است متون واقعاً زشتی دارد.

باز هم ، من شما را در حل این مشکلات راهنمایی می کنم.

در زیر راه حل های پیشنهادی من آورده شده است.

پرداختن به لیست آهنگ ها

هر لیست از آهنگ ها شامل ۴ پاراگراف است. عنوان آهنگ ، هنرمند ، مدت زمان و “سینک ابر گربه ای”. باید راهی وجود داشته باشد که همه اینها را در یک سطر قرار دهد و هر پاراگراف فضای مساوی در این خط را اشغال کند. Flexbox به نجات ما می آید! مفهوم اینجا در بسیاری از سیستم های شبکه به کار رفته است. ترجمه آن را به کد.

li {

  display: flex; /*Targets each list containing the paragraphs*/

  padding: ۰ ۲۰px;

  min-height: ۵۰px;

}

li p {

  flex: ۰ ۰ ۲۵%; /*This is the sweet sauce*/

}

می بینید که آنجا برای پاراگراف ها چه اتفاقی می افتد؟ انعطاف پذیر: ۰ ۰ ۲۵٪ “رشد نکنید یا کوچک نشوید اما هر پاراگراف باید ۲۵٪ از فضای موجود را اشغال کند”. فضا به طور مساوی بین بندها تقسیم می شود.

  html,
  body {
    height: 100%; /*setting this explicitly is important*/
  }
li {
  display: flex; /*Targets each list containing the paragraphs*/
  padding: 0 20px;
  min-height: 50px;
}

li p {
  flex: 0 0 25%; /*This is the sweet sauce*/
}

  body {
    display: flex; /*flex superpowers activated! */
    flex-direction: column; /*Stack the flex-items (main and footer elements) vertically NOT horizontally*/
    background-color: #fff;
    margin: 0;
    font-family: Lato, sans-serif;
    color: #222;
    font-size: 0.9em;
  }

    main {
  flex: 1 0 auto; /*was a flex item*/
  display: flex; /*I just included this! - now a flex container with flex items: sidebar & main content section*/
  }

  footer {
    flex: 0 0 90px; /*don't grow or shrink - just stay at a height of 90px.*/
     padding: 10px;
    color: #fff;
    background-color: rgba(61, 100, 158, .9);
  }

  aside {
    flex: 0 0 40px; /*as a flex item: do not grow or shrink. Just stay fixed at 40px*/
    display: flex; /*Now you're a flex-container, you can decide how your flex-items are laid*/
    flex-direction: column; /*Stack my flex-item's vertically...change the default direction*/
    justify-content: space-around; /*Interesting...since direction is changed, this works on the vertical direction*/
    align-items: center; /*direction is changed! This affects the horizontal direction*/
    background-color: #f2f2f2; /*make me pretty*/
  }
  /*font size for the icons*/
  aside i.fa {
    font-size: 0.9em;
  }

.content {
    display: flex;
    flex: 1 0 auto; /*this makes sure the section grows o fill the entire available space*/
    flex-direction: column;
}

.music-head {
  flex: 0 0 280px; /*Same memo, don't grow or shrink - stay at 280px*/
  display: flex;  
  padding: 40px;
  background-color: #4e4e4e;
}

.music-list {
    flex: 1 0 auto;
    list-style-type: none;
    padding: 5px 10px 0px;
}

<!DOCTYPE html>

  <html>

  <head>

  <title>Catty Music</title>

  </head>

    <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>

    <main>

  <aside> <!–This represents the sidebar and contained in it are icon sets from font-awesome–>

    <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>

  </aside>

<section class=”content”> <!–This section was empty. Populating it with content–>

  <div class=”music-head”> <!–First list item: contains music details–>

      <img src=”/udata/1mQ8VgpWlOk/cattyboard.jpg” /> <!–Album art–>

      <section class=”catty-music”> <!–other details of the album–>

          <div>

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

            <p>Unknown Artist</p>

            <p>2016 . Charts . ۱۰۰ songs</p>

          </div>

          <div> <!–Music controls–>

            <i class=”fa fa-play”> &nbsp;Play all</i>

            <i class=”fa fa-plus”> &nbsp;Add to</i>

            <i class=”fa fa-ellipsis-h”>&nbsp;&nbsp;More</i>

          </div>

      </section>

  </div> <!–end .music-head–>

  <ul class=”music-list”>  <!–Second list item: Contains a list of all songs displayed–>

      <li>

          <p>1. One Dance</p>

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

          <p>2:54</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

      <li>

          <p>2. Panda</p>

          <p>Cattee</p>

          <p>4:06</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

      <li>

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

          <p>Catin Cimberlake</p>

          <p>3:56</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

      <li>

          <p>4. Work From Home</p>

          <p>Cat Harmony feat Colla</p>

          <p>3:34</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

    </ul>

</section>

</main>

  <body>

  <footer></footer> <!–to contain the music control buttons and song details–>

  </body>

</html>

با دادن رنگهای متناوب به لیستها ، کمی بیشتر استایل کنید و با برچسب “سینک ابری گربه ای” نیز برخورد کنید.

li span.catty-cloud {
  border: 1px solid black;
  font-size: 0.6em;
  padding: 3px;
}

li:nth-child(2n) {
  background-color: #f2f2f2;
}

بنابراین ، شما آن را می کشید و واقعاً بهتر می توانید زبان انعطاف پذیر را درک کنید! این همان چیزی است که اکنون باید داشته باشید.

  html,
  body {
    height: 100%; /*setting this explicitly is important*/
  }

li {
  display: flex; /*Targets each list containing the paragraphs*/
  padding: 0 20px;
  min-height: 50px;
}

li p {
  flex: 0 0 25%; /*This is the sweet sauce*/
}

li span.catty-cloud {
  border: 1px solid black;
  font-size: 0.6em;
  padding: 3px;
}

li:nth-child(2n) {
  background-color: #f2f2f2;
}
  body {
    display: flex; /*flex superpowers activated! */
    flex-direction: column; /*Stack the flex-items (main and footer elements) vertically NOT horizontally*/
    background-color: #fff;
    margin: 0;
    font-family: Lato, sans-serif;
    color: #222;
    font-size: 0.9em;
  }

    main {
  flex: 1 0 auto; /*was a flex item*/
  display: flex; /*I just included this! - now a flex container with flex items: sidebar & main content section*/
  }

  footer {
    flex: 0 0 90px; /*don't grow or shrink - just stay at a height of 90px.*/
     padding: 10px;
    color: #fff;
    background-color: rgba(61, 100, 158, .9);
  }
  aside {
    flex: 0 0 40px; /*as a flex item: do not grow or shrink. Just stay fixed at 40px*/
    display: flex; /*Now you're a flex-container, you can decide how your flex-items are laid*/
    flex-direction: column; /*Stack my flex-item's vertically...change the default direction*/
    justify-content: space-around; /*Interesting...since direction is changed, this works on the vertical direction*/
    align-items: center; /*direction is changed! This affects the horizontal direction*/
    background-color: #f2f2f2; /*make me pretty*/
  }

  /*font size for the icons*/
  aside i.fa {
    font-size: 0.9em;
  }

.content {
    display: flex;
    flex: 1 0 auto; /*this makes sure the section grows o fill the entire available space*/
    flex-direction: column;
}

.music-head {
  flex: 0 0 280px; /*Same memo, don't grow or shrink - stay at 280px*/
  display: flex;  
  padding: 40px;
  background-color: #4e4e4e;
}

.music-list {
    flex: 1 0 auto;
    list-style-type: none;
    padding: 5px 10px 0px;
}

<!DOCTYPE html>

  <html>

  <head>

  <title>Catty Music</title>

  </head>

    <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>

    <main>

  <aside> <!–This represents the sidebar and contained in it are icon sets from font-awesome–>

    <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>

  </aside>

 

<section class=”content”> <!–This section was empty. Populating it with content–>

 

  <div class=”music-head”> <!–First list item: contains music details–>

      <img src=”/udata/1mQ8VgpWlOk/cattyboard.jpg” /> <!–Album art–>

 

      <section class=”catty-music”> <!–other details of the album–>

          <div>

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

            <p>Unknown Artist</p>

            <p>2016 . Charts . ۱۰۰ songs</p>

          </div>

 

          <div> <!–Music controls–>

            <i class=”fa fa-play”> &nbsp;Play all</i>

            <i class=”fa fa-plus”> &nbsp;Add to</i>

            <i class=”fa fa-ellipsis-h”>&nbsp;&nbsp;More</i>

          </div>

      </section>

  </div> <!–end .music-head–>

 

  <ul class=”music-list”>  <!–Second list item: Contains a list of all songs displayed–>

      <li>

          <p>1. One Dance</p>

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

          <p>2:54</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

 

      <li>

          <p>2. Panda</p>

          <p>Cattee</p>

          <p>4:06</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

 

      <li>

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

          <p>Catin Cimberlake</p>

          <p>3:56</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

 

      <li>

          <p>4. Work From Home</p>

          <p>Cat Harmony feat Colla</p>

          <p>3:34</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

    </ul>

</section>  

      

</main>

  <body>

 

  <footer></footer> <!–to contain the music control buttons and song details–>

 

  </body>

</html>

از این تکنیک استفاده کنید

این تکنیک بسیار ارزشمند است. می توانید از آن برای ایجاد مناطق محتوای نابرابر استفاده کنید. بگویید ، یک نمای ۲ ستونی. یک بخش می تواند ۶۰٪ فضای موجود را اشغال کند و قسمت دیگر ۴۰٪ بخش اول: ۰ ۰ ۶۰٪؛ بخش دوم: ۰ ۰ ۴۰٪؛ شما می توانید از این روش برای ساخت سیستم های شبکه استفاده کنید. اکنون به مشکل دوم پرداخته خواهد شد.

زیباتر نشان دادن متن جزئیات آلبوم.

موارد بسیار ساده در زیر وجود دارد و تو این کار را کردی کار شما کاملاً تمام شده است.

.catty-music{
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  font-weight: 300;
  color: #fff;
  padding-left: 50px;
}

.catty-music div:nth-child(1){
  margin-bottom: auto;
}

.catty-music div:nth-child(2){
  margin-top: 0;
}

.catty-music div:nth-child(2) i.fa{
  font-size: 0.9em;
  padding: 0 0.7em;
  font-weight: 300;
}
.catty-music div:nth-child(1) p:first-child{
  font-size: 1.8em;
  margin: 0 0 10px;
}

.catty-music div:nth-child(1) p:not(:first-child){
  font-size: 0.9em;
  margin: 2px 0;
}

وای. باور نمی کنم شما به این مرحله رسیده باشید. عالیه!

  html,
  body {
    height: 100%; /*setting this explicitly is important*/
  }

li {
  display: flex; /*Targets each list containing the paragraphs*/
  padding: 0 20px;
  min-height: 50px;
}

li p {
  flex: 0 0 25%; /*This is the sweet sauce*/
}

li span.catty-cloud {
  border: 1px solid black;
  font-size: 0.6em;
  padding: 3px;
}

li:nth-child(2n) {
  background-color: #f2f2f2;
}

  body {
    display: flex; /*flex superpowers activated! */
    flex-direction: column; /*Stack the flex-items (main and footer elements) vertically NOT horizontally*/
    background-color: #fff;
    margin: 0;
    font-family: Lato, sans-serif;
    color: #222;
    font-size: 0.9em;
  }

    main {
  flex: 1 0 auto; /*was a flex item*/
  display: flex; /*I just included this! - now a flex container with flex items: sidebar & main content section*/
  }

  footer {
    flex: 0 0 90px; /*don't grow or shrink - just stay at a height of 90px.*/
     padding: 10px;
    color: #fff;
    background-color: rgba(61, 100, 158, .9);
  }

  aside {
    flex: 0 0 40px; /*as a flex item: do not grow or shrink. Just stay fixed at 40px*/
    display: flex; /*Now you're a flex-container, you can decide how your flex-items are laid*/
    flex-direction: column; /*Stack my flex-item's vertically...change the default direction*/
    justify-content: space-around; /*Interesting...since direction is changed, this works on the vertical direction*/
    align-items: center; /*direction is changed! This affects the horizontal direction*/
    background-color: #f2f2f2; /*make me pretty*/
  }

  /*font size for the icons*/
  aside i.fa {
    font-size: 0.9em;
  }

.content {
    display: flex;
    flex: 1 0 auto; /*this makes sure the section grows o fill the entire available space*/
    flex-direction: column;
}

.music-head {
  flex: 0 0 280px; /*Same memo, don't grow or shrink - stay at 280px*/
  display: flex;  
  padding: 40px;
  background-color: #4e4e4e;
}

.music-list {
    flex: 1 0 auto;
    list-style-type: none;
    padding: 5px 10px 0px;
}

.catty-music{
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  font-weight: 300;
  color: #fff;
  padding-left: 50px;
}

.catty-music div:nth-child(1){
  margin-bottom: auto;
}

.catty-music div:nth-child(2){
  margin-top: 0;
}

.catty-music div:nth-child(2) i.fa{
  font-size: 0.9em;
  padding: 0 0.7em;
  font-weight: 300;
}
.catty-music div:nth-child(1) p:first-child{
  font-size: 1.8em;
  margin: 0 0 10px;
}

.catty-music div:nth-child(1) p:not(:first-child){
  font-size: 0.9em;
  margin: 2px 0;
}

<!DOCTYPE html>

  <html>

  <head>

  <title>Catty Music</title>

  </head>

    <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>

    <main>

  <aside> <!–This represents the sidebar and contained in it are icon sets from font-awesome–>

    <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>

  </aside>

 

<section class=”content”> <!–This section was empty. Populating it with content–>

 

  <div class=”music-head”> <!–First list item: contains music details–>

 

      <img src=”/udata/1mQ8VgpWlOk/cattyboard.jpg” /> <!–Album art–>

 

      <section class=”catty-music”> <!–other details of the album–>

          <div>

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

            <p>Unknown Artist</p>

            <p>2016 . Charts . ۱۰۰ songs</p>

          </div>

 

          <div> <!–Music controls–>

            <i class=”fa fa-play”> &nbsp;Play all</i>

            <i class=”fa fa-plus”> &nbsp;Add to</i>

            <i class=”fa fa-ellipsis-h”>&nbsp;&nbsp;More</i>

          </div>

      </section>

  </div> <!–end .music-head–>

 

  <ul class=”music-list”>  <!–Second list item: Contains a list of all songs displayed–>

      <li>

          <p>1. One Dance</p>

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

          <p>2:54</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

 

      <li>

          <p>2. Panda</p>

          <p>Cattee</p>

          <p>4:06</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

 

      <li>

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

          <p>Catin Cimberlake</p>

          <p>3:56</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

 

      <li>

          <p>4. Work From Home</p>

          <p>Cat Harmony feat Colla</p>

          <p>3:34</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

    </ul>

</section>  

      

</main>

  <body>

 

  <footer></footer> <!–to contain the music control buttons and song details–>

 

  </body>

</html>

شما اکنون در حال تبدیل شدن به یک نینجا Flexbox هستید. در مرحله بعدی ، خواهید دید که Flexbox چگونه می تواند در طراحی رسپانسیو کمک کند.

  body {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    margin: 0;
    font-family: Lato, sans-serif;
    color: #222;
    font-size: 0.9em;
  }
  footer {
    flex: 0 0 90px;
    padding: 10px;
    color: #fff;
    background-color: rgba(61, 100, 158, .9);
  }

هنوز هیچ چیز جادویی اتفاق نیافتاده است. آنچه اکنون داریم:

  html,
  body {
    height: 100%; /*setting this explicitly is important*/
  }

  body {
    display: flex; /*flex superpowers activated! */
    flex-direction: column; /*Stack the flex-items (main and footer elements) vertically NOT horizontally*/
    background-color: #fff;
    margin: 0;
    font-family: Lato, sans-serif;
    color: #222;
    font-size: 0.9em;
  }

  main {
    flex: 1 0 auto; /*fill the available space*/
  }

  footer {
    flex: 0 0 90px; /*don't grow or shrink - just stay at a height of 90px.*/
     padding: 10px;
    color: #fff;
    background-color: rgba(61, 100, 158, .9);
  }

<!DOCTYPE html>

  <html>

  <head>

  <title>Catty Music</title>

  </head>

  <body>

  <main></main> <!–to contain the main section of the app–>

  <footer></footer> <!–to contain the music control buttons and song details–>

  </body>

</html>

با دیدن و لمس اینکه چگونه اوضاع شروع به شکل گیری می کند ، آن را حتی بهتر خواهید کرد. سند html را به روز کنید.

<main>

  <aside> <!–This represents the sidebar and contained in it are icon sets from font-awesome–>

    <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>

  </aside>

  <section class=”content”> <!–This section will house everything other than the sidebar–>

  </section>

</main>

لیست بالا کاملاً توضیحی است. برای مجموعه نمادها ، من از کتابخانه محبوب Font Awesome استفاده می کنم. داشتن نماد مورد نظر خود به سادگی اضافه کردن کلاس CSS ساده است. این همان کاری است که من در تگ aside انجام داده ام. همانطور که قبلا توضیح داده شد ، بخش “اصلی” در بالا نیز یک ظرف فلکس می باشد. نوار کناری (نشان داده شده توسط تگ aside) ، و این بخش موارد منعطفی خواهد بود.

  main {

  flex: ۱ ۰ auto; /*was a flex item*/

  display: flex; /*I just included this! – now a flex container with flex items: sidebar & main content section*/

  }

خوب ، این جالب می شود ، ها؟ اکنون قسمت اصلی را به عنوان یک ظرف فلکس در اختیار دارید. با یکی از موارد فلکس آن ، نوار کناری کنار بیایید. اینجا یک اتفاق جالب رخ داده است نوار کناری دارای نمادهایی است که به صورت عمودی روی هم چیده شده اند. می توانید یک ظرف فلکس را کنار بگذارید و یک جهت فلکس به آن بدهید که به شما اجازه می دهد همه آیکون ها به صورت عمودی و در جای خود قرار بگیرند. در زیر توضیح داده شده است.

  aside {

    flex: ۰ ۰ ۴۰px; /*as a flex item: do not grow or shrink. Just stay fixed at ۴۰px*/

    display: flex; /*Now you’re a flex-container, you can decide how your flex-items are laid*/

    flex-direction: column; /*Stack my flex-item’s vertically…change the default direction*/

    justify-content: space-around; /*Interesting…since direction is changed, this works on the vertical direction*/

    align-items: center; /*direction is changed! This affects the horizontal direction*/

    background-color: #f2f2f2; /*make me pretty*/

  }

  /*font size for the icons*/

  aside i.fa {

    font-size: ۰٫۹em;

  }

من با وسواس از طریق کد بالا نظر داده ام و اکنون می بینم که همه چیز چقدر زیبا است. فوق العاده شسته و رفته با چند خط کد. کدهای منطقی و هیچ هک کثیف.

  html,
  body {
    height: 100%; /*setting this explicitly is important*/
  }

  body {
    display: flex; /*flex superpowers activated! */
    flex-direction: column; /*Stack the flex-items (main and footer elements) vertically NOT horizontally*/
    background-color: #fff;
    margin: 0;
    font-family: Lato, sans-serif;
    color: #222;
    font-size: 0.9em;
  }

    main {
  flex: 1 0 auto; /*was a flex item*/
  display: flex; /*I just included this! - now a flex container with flex items: sidebar & main content section*/
  }
  footer {
    flex: 0 0 90px; /*don't grow or shrink - just stay at a height of 90px.*/
     padding: 10px;
    color: #fff;
    background-color: rgba(61, 100, 158, .9);
  }

  aside {
    flex: 0 0 40px; /*as a flex item: do not grow or shrink. Just stay fixed at 40px*/
    display: flex; /*Now you're a flex-container, you can decide how your flex-items are laid*/
    flex-direction: column; /*Stack my flex-item's vertically...change the default direction*/
    justify-content: space-around; /*Interesting...since direction is changed, this works on the vertical direction*/
    align-items: center; /*direction is changed! This affects the horizontal direction*/
    background-color: #f2f2f2; /*make me pretty*/
  }

  /*font size for the icons*/
  aside i.fa {
    font-size: 0.9em;
  }

<!DOCTYPE html>

  <html>

  <head>

  <title>Catty Music</title>

  </head>

    <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>

    <main>

  <aside> <!–This represents the sidebar and contained in it are icon sets from font-awesome–>

    <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>

  </aside>

  <section class=”content”> <!–This section will house everything other than the sidebar–>

  </section>

</main>

  <body>

  <main></main> <!–to contain the main section of the app–>

  <footer></footer> <!–to contain the music control buttons and song details–>

  </body>

</html>

افزودن محتوا به بخش اصلی.

قسمت محتوای اصلی خالی است اما مورد دوم را فراموش نکنید. نوار کناری اول است. مقداری محتوی در آنجا قرار دهید. شما چی فکر میکنید؟ ممکن است دوباره به پروژه به پایان رسیده نگاهی بیندازید ، بنابراین فراموش نکنید که به کجا می رویم. مهمتر از همه ، این به شما کمک می کند لیست کد بعدی را درک کنید.

<section class=”content”> <!–This section was empty. Populating it with content–>

  <div class=”music-head”> <!–First list item: contains music details–>

      <img src=”images/cattyboard.jpg” /> <!–Album art–>

      <section class=”catty-music”> <!–other details of the album–>

          <div>

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

            <p>Unknown Artist</p>

            <p>2016 . Charts . ۱۰۰ songs</p>

          </div>

          <div> <!–Music controls–>

            <i class=”fa fa-play”> &nbsp;Play all</i>

            <i class=”fa fa-plus”> &nbsp;Add to</i>

            <i class=”fa fa-ellipsis-h”>&nbsp;&nbsp;More</i>

          </div>

      </section>

  </div> <!–end .music-head–>

  <ul class=”music-list”>  <!–Second list item: Contains a list of all songs displayed–>

      <li>

          <p>1. One Dance</p>

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

          <p>2:54</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

      <li>

          <p>2. Panda</p>

          <p>Cattee</p>

          <p>4:06</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

      <li>

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

          <p>Catin Cimberlake</p>

          <p>3:56</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

      <li>

          <p>4. Work From Home</p>

          <p>Cat Harmony feat Colla</p>

          <p>3:34</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

    </ul>

</section>

اهم ، من کمی بیشتر از دفعه گذشته اضافه کردم اما بسیار ساده است. من قسمت محتوای خالی را با یک div جمع کردم که شامل آلبوم و برخی از جزئیات آلبوم گربه است. لیست نامرتب چطور؟ ul لیستی از آهنگ های آلبوم را در اختیار دارد. عنوان آهنگ ، هنرمند ، زمان و “سینک ابری گربه ای” در پاراگراف های جداگانه موجود در لیست موجود است. بنابراین شما با یک ظاهر طراحی شده چه کاری انجام می دهید؟ ببین من چیکار کردم آیا میتوانی حلش کنی؟ اول از همه ، شما باید قسمت اصلی مطالب را یک ظرف فلکس کنید.

.content {
    display: flex;
    flex: 1 0 auto; /*this makes sure the section grows o fill the entire available space*/
    flex-direction: column;
}

.music-head {

  flex: ۰ ۰ ۲۸۰px; /*Same memo, don’t grow or shrink – stay at ۲۸۰px*/

  display: flex;

  padding: ۴۰px;

  background-color: #۴e4e4e;

}

.music-list {

  flex: ۱ ۰ auto;

  list-style-type: none;

  padding: ۵px ۱۰px ۰px;

}

.music-head دارای آلبوم هنری و سایر جزئیات مربوط به آلبوم است. یادداشت مشابه ، رشد نکنید یا کوچک نشوید اما ارتفاع ۲۸۰ پیکسل را حفظ کنید. قد؟ عرض نه؟ آره! عنصر والد قبلاً جهت انعطاف پذیری را تغییر داده بود. اوه ، بعداً شما نیز به این نیاز دارید تا یک ظرف فلکس باشد. بنابراین در display قرار دهید: flex .music-list لیستی از آهنگ ها را در خود نگه می دارد و فضای موجود باقی مانده با .music-head بالا را پر می کند. این هنوز خیلی زیبا نیست اما اگر هنوز هم دنبال می کنید عالی عمل می کنید. عالیه!

  html,
  body {
    height: 100%; /*setting this explicitly is important*/
  }
  body {
    display: flex; /*flex superpowers activated! */
    flex-direction: column; /*Stack the flex-items (main and footer elements) vertically NOT horizontally*/
    background-color: #fff;
    margin: 0;
    font-family: Lato, sans-serif;
    color: #222;
    font-size: 0.9em;
  }

    main {
  flex: 1 0 auto; /*was a flex item*/
  display: flex; /*I just included this! - now a flex container with flex items: sidebar & main content section*/
  }

  footer {
    flex: 0 0 90px; /*don't grow or shrink - just stay at a height of 90px.*/
     padding: 10px;
    color: #fff;
    background-color: rgba(61, 100, 158, .9);
  }

  aside {
    flex: 0 0 40px; /*as a flex item: do not grow or shrink. Just stay fixed at 40px*/
    display: flex; /*Now you're a flex-container, you can decide how your flex-items are laid*/
    flex-direction: column; /*Stack my flex-item's vertically...change the default direction*/
    justify-content: space-around; /*Interesting...since direction is changed, this works on the vertical direction*/
    align-items: center; /*direction is changed! This affects the horizontal direction*/
    background-color: #f2f2f2; /*make me pretty*/
  }

  /*font size for the icons*/
  aside i.fa {
    font-size: 0.9em;
  }

.content {
    display: flex;
    flex: 1 0 auto; /*this makes sure the section grows o fill the entire available space*/
    flex-direction: column;
}

.music-head {
  flex: 0 0 280px; /*Same memo, don't grow or shrink - stay at 280px*/
  display: flex;  
  padding: 40px;
  background-color: #4e4e4e;
}

.music-list {
    flex: 1 0 auto;
    list-style-type: none;
    padding: 5px 10px 0px;
}

<!DOCTYPE html>

  <html>

  <head>

  <title>Catty Music</title>

  </head>

    <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>

    <main>

  <aside> <!–This represents the sidebar and contained in it are icon sets from font-awesome–>

    <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>

  </aside>

<section class=”content”> <!–This section was empty. Populating it with content–>

  <div class=”music-head”> <!–First list item: contains music details–>

      <img src=”/udata/1mQ8VgpWlOk/cattyboard.jpg” /> <!–Album art–>

      <section class=”catty-music”> <!–other details of the album–>

          <div>

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

            <p>Unknown Artist</p>

            <p>2016 . Charts . ۱۰۰ songs</p>

          </div>

          <div> <!–Music controls–>

            <i class=”fa fa-play”> &nbsp;Play all</i>

            <i class=”fa fa-plus”> &nbsp;Add to</i>

            <i class=”fa fa-ellipsis-h”>&nbsp;&nbsp;More</i>

          </div>

      </section>

  </div> <!–end .music-head–>

  <ul class=”music-list”>  <!–Second list item: Contains a list of all songs displayed–>

      <li>

          <p>1. One Dance</p>

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

          <p>2:54</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

      <li>

          <p>2. Panda</p>

          <p>Cattee</p>

          <p>4:06</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

      <li>

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

          <p>Catin Cimberlake</p>

          <p>3:56</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

      <li>

          <p>4. Work From Home</p>

          <p>Cat Harmony feat Colla</p>

          <p>3:34</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

    </ul>

</section>

</main>

  <body>

  <footer></footer> <!–to contain the music control buttons and song details–>

  </body>

</html>

در اینجا چند مشکل وجود دارد. لیست آهنگ ها وحشتناک به نظر می رسد.

بخشی که شامل هنر موسیقی است متون واقعاً زشتی دارد.

باز هم ، من شما را در حل این مشکلات راهنمایی می کنم.

در زیر راه حل های پیشنهادی من آورده شده است.

پرداختن به لیست آهنگ ها

هر لیست از آهنگ ها شامل ۴ پاراگراف است. عنوان آهنگ ، هنرمند ، مدت زمان و “سینک ابر گربه ای”. باید راهی وجود داشته باشد که همه اینها را در یک سطر قرار دهد و هر پاراگراف فضای مساوی در این خط را اشغال کند. Flexbox به نجات ما می آید! مفهوم اینجا در بسیاری از سیستم های شبکه به کار رفته است. ترجمه آن را به کد.

li {

  display: flex; /*Targets each list containing the paragraphs*/

  padding: ۰ ۲۰px;

  min-height: ۵۰px;

}

li p {

  flex: ۰ ۰ ۲۵%; /*This is the sweet sauce*/

}

می بینید که آنجا برای پاراگراف ها چه اتفاقی می افتد؟ انعطاف پذیر: ۰ ۰ ۲۵٪ “رشد نکنید یا کوچک نشوید اما هر پاراگراف باید ۲۵٪ از فضای موجود را اشغال کند”. فضا به طور مساوی بین بندها تقسیم می شود.

  html,
  body {
    height: 100%; /*setting this explicitly is important*/
  }
li {
  display: flex; /*Targets each list containing the paragraphs*/
  padding: 0 20px;
  min-height: 50px;
}

li p {
  flex: 0 0 25%; /*This is the sweet sauce*/
}

  body {
    display: flex; /*flex superpowers activated! */
    flex-direction: column; /*Stack the flex-items (main and footer elements) vertically NOT horizontally*/
    background-color: #fff;
    margin: 0;
    font-family: Lato, sans-serif;
    color: #222;
    font-size: 0.9em;
  }

    main {
  flex: 1 0 auto; /*was a flex item*/
  display: flex; /*I just included this! - now a flex container with flex items: sidebar & main content section*/
  }

  footer {
    flex: 0 0 90px; /*don't grow or shrink - just stay at a height of 90px.*/
     padding: 10px;
    color: #fff;
    background-color: rgba(61, 100, 158, .9);
  }

  aside {
    flex: 0 0 40px; /*as a flex item: do not grow or shrink. Just stay fixed at 40px*/
    display: flex; /*Now you're a flex-container, you can decide how your flex-items are laid*/
    flex-direction: column; /*Stack my flex-item's vertically...change the default direction*/
    justify-content: space-around; /*Interesting...since direction is changed, this works on the vertical direction*/
    align-items: center; /*direction is changed! This affects the horizontal direction*/
    background-color: #f2f2f2; /*make me pretty*/
  }
  /*font size for the icons*/
  aside i.fa {
    font-size: 0.9em;
  }

.content {
    display: flex;
    flex: 1 0 auto; /*this makes sure the section grows o fill the entire available space*/
    flex-direction: column;
}

.music-head {
  flex: 0 0 280px; /*Same memo, don't grow or shrink - stay at 280px*/
  display: flex;  
  padding: 40px;
  background-color: #4e4e4e;
}

.music-list {
    flex: 1 0 auto;
    list-style-type: none;
    padding: 5px 10px 0px;
}

<!DOCTYPE html>

  <html>

  <head>

  <title>Catty Music</title>

  </head>

    <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>

    <main>

  <aside> <!–This represents the sidebar and contained in it are icon sets from font-awesome–>

    <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>

  </aside>

<section class=”content”> <!–This section was empty. Populating it with content–>

  <div class=”music-head”> <!–First list item: contains music details–>

      <img src=”/udata/1mQ8VgpWlOk/cattyboard.jpg” /> <!–Album art–>

      <section class=”catty-music”> <!–other details of the album–>

          <div>

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

            <p>Unknown Artist</p>

            <p>2016 . Charts . ۱۰۰ songs</p>

          </div>

          <div> <!–Music controls–>

            <i class=”fa fa-play”> &nbsp;Play all</i>

            <i class=”fa fa-plus”> &nbsp;Add to</i>

            <i class=”fa fa-ellipsis-h”>&nbsp;&nbsp;More</i>

          </div>

      </section>

  </div> <!–end .music-head–>

  <ul class=”music-list”>  <!–Second list item: Contains a list of all songs displayed–>

      <li>

          <p>1. One Dance</p>

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

          <p>2:54</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

      <li>

          <p>2. Panda</p>

          <p>Cattee</p>

          <p>4:06</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

      <li>

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

          <p>Catin Cimberlake</p>

          <p>3:56</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

      <li>

          <p>4. Work From Home</p>

          <p>Cat Harmony feat Colla</p>

          <p>3:34</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

    </ul>

</section>

</main>

  <body>

  <footer></footer> <!–to contain the music control buttons and song details–>

  </body>

</html>

با دادن رنگهای متناوب به لیستها ، کمی بیشتر استایل کنید و با برچسب “سینک ابری گربه ای” نیز برخورد کنید.

li span.catty-cloud {
  border: 1px solid black;
  font-size: 0.6em;
  padding: 3px;
}

li:nth-child(2n) {
  background-color: #f2f2f2;
}

بنابراین ، شما آن را می کشید و واقعاً بهتر می توانید زبان انعطاف پذیر را درک کنید! این همان چیزی است که اکنون باید داشته باشید.

  html,
  body {
    height: 100%; /*setting this explicitly is important*/
  }

li {
  display: flex; /*Targets each list containing the paragraphs*/
  padding: 0 20px;
  min-height: 50px;
}

li p {
  flex: 0 0 25%; /*This is the sweet sauce*/
}

li span.catty-cloud {
  border: 1px solid black;
  font-size: 0.6em;
  padding: 3px;
}

li:nth-child(2n) {
  background-color: #f2f2f2;
}
  body {
    display: flex; /*flex superpowers activated! */
    flex-direction: column; /*Stack the flex-items (main and footer elements) vertically NOT horizontally*/
    background-color: #fff;
    margin: 0;
    font-family: Lato, sans-serif;
    color: #222;
    font-size: 0.9em;
  }

    main {
  flex: 1 0 auto; /*was a flex item*/
  display: flex; /*I just included this! - now a flex container with flex items: sidebar & main content section*/
  }

  footer {
    flex: 0 0 90px; /*don't grow or shrink - just stay at a height of 90px.*/
     padding: 10px;
    color: #fff;
    background-color: rgba(61, 100, 158, .9);
  }
  aside {
    flex: 0 0 40px; /*as a flex item: do not grow or shrink. Just stay fixed at 40px*/
    display: flex; /*Now you're a flex-container, you can decide how your flex-items are laid*/
    flex-direction: column; /*Stack my flex-item's vertically...change the default direction*/
    justify-content: space-around; /*Interesting...since direction is changed, this works on the vertical direction*/
    align-items: center; /*direction is changed! This affects the horizontal direction*/
    background-color: #f2f2f2; /*make me pretty*/
  }

  /*font size for the icons*/
  aside i.fa {
    font-size: 0.9em;
  }

.content {
    display: flex;
    flex: 1 0 auto; /*this makes sure the section grows o fill the entire available space*/
    flex-direction: column;
}

.music-head {
  flex: 0 0 280px; /*Same memo, don't grow or shrink - stay at 280px*/
  display: flex;  
  padding: 40px;
  background-color: #4e4e4e;
}

.music-list {
    flex: 1 0 auto;
    list-style-type: none;
    padding: 5px 10px 0px;
}

<!DOCTYPE html>

  <html>

  <head>

  <title>Catty Music</title>

  </head>

    <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>

    <main>

  <aside> <!–This represents the sidebar and contained in it are icon sets from font-awesome–>

    <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>

  </aside>

 

<section class=”content”> <!–This section was empty. Populating it with content–>

 

  <div class=”music-head”> <!–First list item: contains music details–>

      <img src=”/udata/1mQ8VgpWlOk/cattyboard.jpg” /> <!–Album art–>

 

      <section class=”catty-music”> <!–other details of the album–>

          <div>

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

            <p>Unknown Artist</p>

            <p>2016 . Charts . ۱۰۰ songs</p>

          </div>

 

          <div> <!–Music controls–>

            <i class=”fa fa-play”> &nbsp;Play all</i>

            <i class=”fa fa-plus”> &nbsp;Add to</i>

            <i class=”fa fa-ellipsis-h”>&nbsp;&nbsp;More</i>

          </div>

      </section>

  </div> <!–end .music-head–>

 

  <ul class=”music-list”>  <!–Second list item: Contains a list of all songs displayed–>

      <li>

          <p>1. One Dance</p>

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

          <p>2:54</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

 

      <li>

          <p>2. Panda</p>

          <p>Cattee</p>

          <p>4:06</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

 

      <li>

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

          <p>Catin Cimberlake</p>

          <p>3:56</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

 

      <li>

          <p>4. Work From Home</p>

          <p>Cat Harmony feat Colla</p>

          <p>3:34</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

    </ul>

</section>  

      

</main>

  <body>

 

  <footer></footer> <!–to contain the music control buttons and song details–>

 

  </body>

</html>

از این تکنیک استفاده کنید

این تکنیک بسیار ارزشمند است. می توانید از آن برای ایجاد مناطق محتوای نابرابر استفاده کنید. بگویید ، یک نمای ۲ ستونی. یک بخش می تواند ۶۰٪ فضای موجود را اشغال کند و قسمت دیگر ۴۰٪ بخش اول: ۰ ۰ ۶۰٪؛ بخش دوم: ۰ ۰ ۴۰٪؛ شما می توانید از این روش برای ساخت سیستم های شبکه استفاده کنید. اکنون به مشکل دوم پرداخته خواهد شد.

زیباتر نشان دادن متن جزئیات آلبوم.

موارد بسیار ساده در زیر وجود دارد و تو این کار را کردی کار شما کاملاً تمام شده است.

.catty-music{
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  font-weight: 300;
  color: #fff;
  padding-left: 50px;
}

.catty-music div:nth-child(1){
  margin-bottom: auto;
}

.catty-music div:nth-child(2){
  margin-top: 0;
}

.catty-music div:nth-child(2) i.fa{
  font-size: 0.9em;
  padding: 0 0.7em;
  font-weight: 300;
}
.catty-music div:nth-child(1) p:first-child{
  font-size: 1.8em;
  margin: 0 0 10px;
}

.catty-music div:nth-child(1) p:not(:first-child){
  font-size: 0.9em;
  margin: 2px 0;
}

وای. باور نمی کنم شما به این مرحله رسیده باشید. عالیه!

  html,
  body {
    height: 100%; /*setting this explicitly is important*/
  }

li {
  display: flex; /*Targets each list containing the paragraphs*/
  padding: 0 20px;
  min-height: 50px;
}

li p {
  flex: 0 0 25%; /*This is the sweet sauce*/
}

li span.catty-cloud {
  border: 1px solid black;
  font-size: 0.6em;
  padding: 3px;
}

li:nth-child(2n) {
  background-color: #f2f2f2;
}

  body {
    display: flex; /*flex superpowers activated! */
    flex-direction: column; /*Stack the flex-items (main and footer elements) vertically NOT horizontally*/
    background-color: #fff;
    margin: 0;
    font-family: Lato, sans-serif;
    color: #222;
    font-size: 0.9em;
  }

    main {
  flex: 1 0 auto; /*was a flex item*/
  display: flex; /*I just included this! - now a flex container with flex items: sidebar & main content section*/
  }

  footer {
    flex: 0 0 90px; /*don't grow or shrink - just stay at a height of 90px.*/
     padding: 10px;
    color: #fff;
    background-color: rgba(61, 100, 158, .9);
  }

  aside {
    flex: 0 0 40px; /*as a flex item: do not grow or shrink. Just stay fixed at 40px*/
    display: flex; /*Now you're a flex-container, you can decide how your flex-items are laid*/
    flex-direction: column; /*Stack my flex-item's vertically...change the default direction*/
    justify-content: space-around; /*Interesting...since direction is changed, this works on the vertical direction*/
    align-items: center; /*direction is changed! This affects the horizontal direction*/
    background-color: #f2f2f2; /*make me pretty*/
  }

  /*font size for the icons*/
  aside i.fa {
    font-size: 0.9em;
  }

.content {
    display: flex;
    flex: 1 0 auto; /*this makes sure the section grows o fill the entire available space*/
    flex-direction: column;
}

.music-head {
  flex: 0 0 280px; /*Same memo, don't grow or shrink - stay at 280px*/
  display: flex;  
  padding: 40px;
  background-color: #4e4e4e;
}

.music-list {
    flex: 1 0 auto;
    list-style-type: none;
    padding: 5px 10px 0px;
}

.catty-music{
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  font-weight: 300;
  color: #fff;
  padding-left: 50px;
}

.catty-music div:nth-child(1){
  margin-bottom: auto;
}

.catty-music div:nth-child(2){
  margin-top: 0;
}

.catty-music div:nth-child(2) i.fa{
  font-size: 0.9em;
  padding: 0 0.7em;
  font-weight: 300;
}
.catty-music div:nth-child(1) p:first-child{
  font-size: 1.8em;
  margin: 0 0 10px;
}

.catty-music div:nth-child(1) p:not(:first-child){
  font-size: 0.9em;
  margin: 2px 0;
}

<!DOCTYPE html>

  <html>

  <head>

  <title>Catty Music</title>

  </head>

    <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>

    <main>

  <aside> <!–This represents the sidebar and contained in it are icon sets from font-awesome–>

    <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>

  </aside>

 

<section class=”content”> <!–This section was empty. Populating it with content–>

 

  <div class=”music-head”> <!–First list item: contains music details–>

 

      <img src=”/udata/1mQ8VgpWlOk/cattyboard.jpg” /> <!–Album art–>

 

      <section class=”catty-music”> <!–other details of the album–>

          <div>

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

            <p>Unknown Artist</p>

            <p>2016 . Charts . ۱۰۰ songs</p>

          </div>

 

          <div> <!–Music controls–>

            <i class=”fa fa-play”> &nbsp;Play all</i>

            <i class=”fa fa-plus”> &nbsp;Add to</i>

            <i class=”fa fa-ellipsis-h”>&nbsp;&nbsp;More</i>

          </div>

      </section>

  </div> <!–end .music-head–>

 

  <ul class=”music-list”>  <!–Second list item: Contains a list of all songs displayed–>

      <li>

          <p>1. One Dance</p>

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

          <p>2:54</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

 

      <li>

          <p>2. Panda</p>

          <p>Cattee</p>

          <p>4:06</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

 

      <li>

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

          <p>Catin Cimberlake</p>

          <p>3:56</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

 

      <li>

          <p>4. Work From Home</p>

          <p>Cat Harmony feat Colla</p>

          <p>3:34</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

    </ul>

</section>  

      

</main>

  <body>

 

  <footer></footer> <!–to contain the music control buttons and song details–>

 

  </body>

</html>

شما اکنون در حال تبدیل شدن به یک نینجا Flexbox هستید. در مرحله بعدی ، خواهید دید که Flexbox چگونه می تواند در طراحی رسپانسیو کمک کند.

  main {
    flex: 1 0 auto; /*fill the available space*/
  }

  footer {
    flex: 0 0 90px; /*don't grow or shrink - just stay at a height of 90px.*/
  }

با تشکر از خاصیت flex-grow. نسبتاً آسان است که بخش اصلی کل فضا را پر کند. فقط مقدار flex-grow را روی ۱ تنظیم کنید. همچنین باید ویژگی flex-shrink را روی صفر قرار دهید. چرا؟ دلیل آن ممکن است در اینجا مشهود باشد زیرا جهت انعطاف پذیری تغییر کرده است. در برخی از مرورگرها ، یک اشکال وجود دارد که اجازه می دهد آیتم های فلکس زیر اندازه محتوای آنها کوچک شوند. این رفتار کاملاً عجیبی است. راه حل این اشکال این است که مقدار flex-shrink را در ۰ قرار دادید و در پیش فرض ۱ قرار نداده اید و همچنین لطفا ویژگی flex-based را به صورت خودکار تنظیم کنید. مثل این است که بگویید: “لطفاً بر اساس اندازه محتوای خود عرض اولیه را بگیرید ، اما هرگز کوچک نشوید.” با این مقدار مختصر ، همچنان رفتار پیش فرض موارد فلکس را بدست می آورید. با تغییر اندازه مرورگر ، مورد فلکس کوچک می شود. تغییر اندازه براساس خاصیت کوچک شدن نیست. این بر اساس محاسبه مجدد عرض آیتم فلکس به طور خودکار است. flex-basis: auto این باعث می شود که مورد فلکس حداقل به اندازه عرض یا ارتفاع (در صورت اعلام) یا اندازه محتوای پیش فرض آن باشد. لطفاً چارچوبی را که برای آن ویژگیهای انعطاف پذیری خرد کردم را فراموش نکنید. موارد کوتاه مختصری در این زمینه وجود دارد. اکنون که چیزهایی با هم جمع شده اند ، کمی استایل طراحی کنید و فاصله ، رنگ و غیره را تعریف کنید.

  body {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    margin: 0;
    font-family: Lato, sans-serif;
    color: #222;
    font-size: 0.9em;
  }
  footer {
    flex: 0 0 90px;
    padding: 10px;
    color: #fff;
    background-color: rgba(61, 100, 158, .9);
  }

هنوز هیچ چیز جادویی اتفاق نیافتاده است. آنچه اکنون داریم:

  html,
  body {
    height: 100%; /*setting this explicitly is important*/
  }

  body {
    display: flex; /*flex superpowers activated! */
    flex-direction: column; /*Stack the flex-items (main and footer elements) vertically NOT horizontally*/
    background-color: #fff;
    margin: 0;
    font-family: Lato, sans-serif;
    color: #222;
    font-size: 0.9em;
  }

  main {
    flex: 1 0 auto; /*fill the available space*/
  }

  footer {
    flex: 0 0 90px; /*don't grow or shrink - just stay at a height of 90px.*/
     padding: 10px;
    color: #fff;
    background-color: rgba(61, 100, 158, .9);
  }

<!DOCTYPE html>

  <html>

  <head>

  <title>Catty Music</title>

  </head>

  <body>

  <main></main> <!–to contain the main section of the app–>

  <footer></footer> <!–to contain the music control buttons and song details–>

  </body>

</html>

با دیدن و لمس اینکه چگونه اوضاع شروع به شکل گیری می کند ، آن را حتی بهتر خواهید کرد. سند html را به روز کنید.

<main>

  <aside> <!–This represents the sidebar and contained in it are icon sets from font-awesome–>

    <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>

  </aside>

  <section class=”content”> <!–This section will house everything other than the sidebar–>

  </section>

</main>

لیست بالا کاملاً توضیحی است. برای مجموعه نمادها ، من از کتابخانه محبوب Font Awesome استفاده می کنم. داشتن نماد مورد نظر خود به سادگی اضافه کردن کلاس CSS ساده است. این همان کاری است که من در تگ aside انجام داده ام. همانطور که قبلا توضیح داده شد ، بخش “اصلی” در بالا نیز یک ظرف فلکس می باشد. نوار کناری (نشان داده شده توسط تگ aside) ، و این بخش موارد منعطفی خواهد بود.

  main {

  flex: ۱ ۰ auto; /*was a flex item*/

  display: flex; /*I just included this! – now a flex container with flex items: sidebar & main content section*/

  }

خوب ، این جالب می شود ، ها؟ اکنون قسمت اصلی را به عنوان یک ظرف فلکس در اختیار دارید. با یکی از موارد فلکس آن ، نوار کناری کنار بیایید. اینجا یک اتفاق جالب رخ داده است نوار کناری دارای نمادهایی است که به صورت عمودی روی هم چیده شده اند. می توانید یک ظرف فلکس را کنار بگذارید و یک جهت فلکس به آن بدهید که به شما اجازه می دهد همه آیکون ها به صورت عمودی و در جای خود قرار بگیرند. در زیر توضیح داده شده است.

  aside {

    flex: ۰ ۰ ۴۰px; /*as a flex item: do not grow or shrink. Just stay fixed at ۴۰px*/

    display: flex; /*Now you’re a flex-container, you can decide how your flex-items are laid*/

    flex-direction: column; /*Stack my flex-item’s vertically…change the default direction*/

    justify-content: space-around; /*Interesting…since direction is changed, this works on the vertical direction*/

    align-items: center; /*direction is changed! This affects the horizontal direction*/

    background-color: #f2f2f2; /*make me pretty*/

  }

  /*font size for the icons*/

  aside i.fa {

    font-size: ۰٫۹em;

  }

من با وسواس از طریق کد بالا نظر داده ام و اکنون می بینم که همه چیز چقدر زیبا است. فوق العاده شسته و رفته با چند خط کد. کدهای منطقی و هیچ هک کثیف.

  html,
  body {
    height: 100%; /*setting this explicitly is important*/
  }

  body {
    display: flex; /*flex superpowers activated! */
    flex-direction: column; /*Stack the flex-items (main and footer elements) vertically NOT horizontally*/
    background-color: #fff;
    margin: 0;
    font-family: Lato, sans-serif;
    color: #222;
    font-size: 0.9em;
  }

    main {
  flex: 1 0 auto; /*was a flex item*/
  display: flex; /*I just included this! - now a flex container with flex items: sidebar & main content section*/
  }
  footer {
    flex: 0 0 90px; /*don't grow or shrink - just stay at a height of 90px.*/
     padding: 10px;
    color: #fff;
    background-color: rgba(61, 100, 158, .9);
  }

  aside {
    flex: 0 0 40px; /*as a flex item: do not grow or shrink. Just stay fixed at 40px*/
    display: flex; /*Now you're a flex-container, you can decide how your flex-items are laid*/
    flex-direction: column; /*Stack my flex-item's vertically...change the default direction*/
    justify-content: space-around; /*Interesting...since direction is changed, this works on the vertical direction*/
    align-items: center; /*direction is changed! This affects the horizontal direction*/
    background-color: #f2f2f2; /*make me pretty*/
  }

  /*font size for the icons*/
  aside i.fa {
    font-size: 0.9em;
  }

<!DOCTYPE html>

  <html>

  <head>

  <title>Catty Music</title>

  </head>

    <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>

    <main>

  <aside> <!–This represents the sidebar and contained in it are icon sets from font-awesome–>

    <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>

  </aside>

  <section class=”content”> <!–This section will house everything other than the sidebar–>

  </section>

</main>

  <body>

  <main></main> <!–to contain the main section of the app–>

  <footer></footer> <!–to contain the music control buttons and song details–>

  </body>

</html>

افزودن محتوا به بخش اصلی.

قسمت محتوای اصلی خالی است اما مورد دوم را فراموش نکنید. نوار کناری اول است. مقداری محتوی در آنجا قرار دهید. شما چی فکر میکنید؟ ممکن است دوباره به پروژه به پایان رسیده نگاهی بیندازید ، بنابراین فراموش نکنید که به کجا می رویم. مهمتر از همه ، این به شما کمک می کند لیست کد بعدی را درک کنید.

<section class=”content”> <!–This section was empty. Populating it with content–>

  <div class=”music-head”> <!–First list item: contains music details–>

      <img src=”images/cattyboard.jpg” /> <!–Album art–>

      <section class=”catty-music”> <!–other details of the album–>

          <div>

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

            <p>Unknown Artist</p>

            <p>2016 . Charts . ۱۰۰ songs</p>

          </div>

          <div> <!–Music controls–>

            <i class=”fa fa-play”> &nbsp;Play all</i>

            <i class=”fa fa-plus”> &nbsp;Add to</i>

            <i class=”fa fa-ellipsis-h”>&nbsp;&nbsp;More</i>

          </div>

      </section>

  </div> <!–end .music-head–>

  <ul class=”music-list”>  <!–Second list item: Contains a list of all songs displayed–>

      <li>

          <p>1. One Dance</p>

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

          <p>2:54</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

      <li>

          <p>2. Panda</p>

          <p>Cattee</p>

          <p>4:06</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

      <li>

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

          <p>Catin Cimberlake</p>

          <p>3:56</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

      <li>

          <p>4. Work From Home</p>

          <p>Cat Harmony feat Colla</p>

          <p>3:34</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

    </ul>

</section>

اهم ، من کمی بیشتر از دفعه گذشته اضافه کردم اما بسیار ساده است. من قسمت محتوای خالی را با یک div جمع کردم که شامل آلبوم و برخی از جزئیات آلبوم گربه است. لیست نامرتب چطور؟ ul لیستی از آهنگ های آلبوم را در اختیار دارد. عنوان آهنگ ، هنرمند ، زمان و “سینک ابری گربه ای” در پاراگراف های جداگانه موجود در لیست موجود است. بنابراین شما با یک ظاهر طراحی شده چه کاری انجام می دهید؟ ببین من چیکار کردم آیا میتوانی حلش کنی؟ اول از همه ، شما باید قسمت اصلی مطالب را یک ظرف فلکس کنید.

.content {
    display: flex;
    flex: 1 0 auto; /*this makes sure the section grows o fill the entire available space*/
    flex-direction: column;
}

.music-head {

  flex: ۰ ۰ ۲۸۰px; /*Same memo, don’t grow or shrink – stay at ۲۸۰px*/

  display: flex;

  padding: ۴۰px;

  background-color: #۴e4e4e;

}

.music-list {

  flex: ۱ ۰ auto;

  list-style-type: none;

  padding: ۵px ۱۰px ۰px;

}

.music-head دارای آلبوم هنری و سایر جزئیات مربوط به آلبوم است. یادداشت مشابه ، رشد نکنید یا کوچک نشوید اما ارتفاع ۲۸۰ پیکسل را حفظ کنید. قد؟ عرض نه؟ آره! عنصر والد قبلاً جهت انعطاف پذیری را تغییر داده بود. اوه ، بعداً شما نیز به این نیاز دارید تا یک ظرف فلکس باشد. بنابراین در display قرار دهید: flex .music-list لیستی از آهنگ ها را در خود نگه می دارد و فضای موجود باقی مانده با .music-head بالا را پر می کند. این هنوز خیلی زیبا نیست اما اگر هنوز هم دنبال می کنید عالی عمل می کنید. عالیه!

  html,
  body {
    height: 100%; /*setting this explicitly is important*/
  }
  body {
    display: flex; /*flex superpowers activated! */
    flex-direction: column; /*Stack the flex-items (main and footer elements) vertically NOT horizontally*/
    background-color: #fff;
    margin: 0;
    font-family: Lato, sans-serif;
    color: #222;
    font-size: 0.9em;
  }

    main {
  flex: 1 0 auto; /*was a flex item*/
  display: flex; /*I just included this! - now a flex container with flex items: sidebar & main content section*/
  }

  footer {
    flex: 0 0 90px; /*don't grow or shrink - just stay at a height of 90px.*/
     padding: 10px;
    color: #fff;
    background-color: rgba(61, 100, 158, .9);
  }

  aside {
    flex: 0 0 40px; /*as a flex item: do not grow or shrink. Just stay fixed at 40px*/
    display: flex; /*Now you're a flex-container, you can decide how your flex-items are laid*/
    flex-direction: column; /*Stack my flex-item's vertically...change the default direction*/
    justify-content: space-around; /*Interesting...since direction is changed, this works on the vertical direction*/
    align-items: center; /*direction is changed! This affects the horizontal direction*/
    background-color: #f2f2f2; /*make me pretty*/
  }

  /*font size for the icons*/
  aside i.fa {
    font-size: 0.9em;
  }

.content {
    display: flex;
    flex: 1 0 auto; /*this makes sure the section grows o fill the entire available space*/
    flex-direction: column;
}

.music-head {
  flex: 0 0 280px; /*Same memo, don't grow or shrink - stay at 280px*/
  display: flex;  
  padding: 40px;
  background-color: #4e4e4e;
}

.music-list {
    flex: 1 0 auto;
    list-style-type: none;
    padding: 5px 10px 0px;
}

<!DOCTYPE html>

  <html>

  <head>

  <title>Catty Music</title>

  </head>

    <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>

    <main>

  <aside> <!–This represents the sidebar and contained in it are icon sets from font-awesome–>

    <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>

  </aside>

<section class=”content”> <!–This section was empty. Populating it with content–>

  <div class=”music-head”> <!–First list item: contains music details–>

      <img src=”/udata/1mQ8VgpWlOk/cattyboard.jpg” /> <!–Album art–>

      <section class=”catty-music”> <!–other details of the album–>

          <div>

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

            <p>Unknown Artist</p>

            <p>2016 . Charts . ۱۰۰ songs</p>

          </div>

          <div> <!–Music controls–>

            <i class=”fa fa-play”> &nbsp;Play all</i>

            <i class=”fa fa-plus”> &nbsp;Add to</i>

            <i class=”fa fa-ellipsis-h”>&nbsp;&nbsp;More</i>

          </div>

      </section>

  </div> <!–end .music-head–>

  <ul class=”music-list”>  <!–Second list item: Contains a list of all songs displayed–>

      <li>

          <p>1. One Dance</p>

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

          <p>2:54</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

      <li>

          <p>2. Panda</p>

          <p>Cattee</p>

          <p>4:06</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

      <li>

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

          <p>Catin Cimberlake</p>

          <p>3:56</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

      <li>

          <p>4. Work From Home</p>

          <p>Cat Harmony feat Colla</p>

          <p>3:34</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

    </ul>

</section>

</main>

  <body>

  <footer></footer> <!–to contain the music control buttons and song details–>

  </body>

</html>

در اینجا چند مشکل وجود دارد. لیست آهنگ ها وحشتناک به نظر می رسد.

بخشی که شامل هنر موسیقی است متون واقعاً زشتی دارد.

باز هم ، من شما را در حل این مشکلات راهنمایی می کنم.

در زیر راه حل های پیشنهادی من آورده شده است.

پرداختن به لیست آهنگ ها

هر لیست از آهنگ ها شامل ۴ پاراگراف است. عنوان آهنگ ، هنرمند ، مدت زمان و “سینک ابر گربه ای”. باید راهی وجود داشته باشد که همه اینها را در یک سطر قرار دهد و هر پاراگراف فضای مساوی در این خط را اشغال کند. Flexbox به نجات ما می آید! مفهوم اینجا در بسیاری از سیستم های شبکه به کار رفته است. ترجمه آن را به کد.

li {

  display: flex; /*Targets each list containing the paragraphs*/

  padding: ۰ ۲۰px;

  min-height: ۵۰px;

}

li p {

  flex: ۰ ۰ ۲۵%; /*This is the sweet sauce*/

}

می بینید که آنجا برای پاراگراف ها چه اتفاقی می افتد؟ انعطاف پذیر: ۰ ۰ ۲۵٪ “رشد نکنید یا کوچک نشوید اما هر پاراگراف باید ۲۵٪ از فضای موجود را اشغال کند”. فضا به طور مساوی بین بندها تقسیم می شود.

  html,
  body {
    height: 100%; /*setting this explicitly is important*/
  }
li {
  display: flex; /*Targets each list containing the paragraphs*/
  padding: 0 20px;
  min-height: 50px;
}

li p {
  flex: 0 0 25%; /*This is the sweet sauce*/
}

  body {
    display: flex; /*flex superpowers activated! */
    flex-direction: column; /*Stack the flex-items (main and footer elements) vertically NOT horizontally*/
    background-color: #fff;
    margin: 0;
    font-family: Lato, sans-serif;
    color: #222;
    font-size: 0.9em;
  }

    main {
  flex: 1 0 auto; /*was a flex item*/
  display: flex; /*I just included this! - now a flex container with flex items: sidebar & main content section*/
  }

  footer {
    flex: 0 0 90px; /*don't grow or shrink - just stay at a height of 90px.*/
     padding: 10px;
    color: #fff;
    background-color: rgba(61, 100, 158, .9);
  }

  aside {
    flex: 0 0 40px; /*as a flex item: do not grow or shrink. Just stay fixed at 40px*/
    display: flex; /*Now you're a flex-container, you can decide how your flex-items are laid*/
    flex-direction: column; /*Stack my flex-item's vertically...change the default direction*/
    justify-content: space-around; /*Interesting...since direction is changed, this works on the vertical direction*/
    align-items: center; /*direction is changed! This affects the horizontal direction*/
    background-color: #f2f2f2; /*make me pretty*/
  }
  /*font size for the icons*/
  aside i.fa {
    font-size: 0.9em;
  }

.content {
    display: flex;
    flex: 1 0 auto; /*this makes sure the section grows o fill the entire available space*/
    flex-direction: column;
}

.music-head {
  flex: 0 0 280px; /*Same memo, don't grow or shrink - stay at 280px*/
  display: flex;  
  padding: 40px;
  background-color: #4e4e4e;
}

.music-list {
    flex: 1 0 auto;
    list-style-type: none;
    padding: 5px 10px 0px;
}

<!DOCTYPE html>

  <html>

  <head>

  <title>Catty Music</title>

  </head>

    <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>

    <main>

  <aside> <!–This represents the sidebar and contained in it are icon sets from font-awesome–>

    <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>

  </aside>

<section class=”content”> <!–This section was empty. Populating it with content–>

  <div class=”music-head”> <!–First list item: contains music details–>

      <img src=”/udata/1mQ8VgpWlOk/cattyboard.jpg” /> <!–Album art–>

      <section class=”catty-music”> <!–other details of the album–>

          <div>

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

            <p>Unknown Artist</p>

            <p>2016 . Charts . ۱۰۰ songs</p>

          </div>

          <div> <!–Music controls–>

            <i class=”fa fa-play”> &nbsp;Play all</i>

            <i class=”fa fa-plus”> &nbsp;Add to</i>

            <i class=”fa fa-ellipsis-h”>&nbsp;&nbsp;More</i>

          </div>

      </section>

  </div> <!–end .music-head–>

  <ul class=”music-list”>  <!–Second list item: Contains a list of all songs displayed–>

      <li>

          <p>1. One Dance</p>

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

          <p>2:54</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

      <li>

          <p>2. Panda</p>

          <p>Cattee</p>

          <p>4:06</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

      <li>

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

          <p>Catin Cimberlake</p>

          <p>3:56</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

      <li>

          <p>4. Work From Home</p>

          <p>Cat Harmony feat Colla</p>

          <p>3:34</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

    </ul>

</section>

</main>

  <body>

  <footer></footer> <!–to contain the music control buttons and song details–>

  </body>

</html>

با دادن رنگهای متناوب به لیستها ، کمی بیشتر استایل کنید و با برچسب “سینک ابری گربه ای” نیز برخورد کنید.

li span.catty-cloud {
  border: 1px solid black;
  font-size: 0.6em;
  padding: 3px;
}

li:nth-child(2n) {
  background-color: #f2f2f2;
}

بنابراین ، شما آن را می کشید و واقعاً بهتر می توانید زبان انعطاف پذیر را درک کنید! این همان چیزی است که اکنون باید داشته باشید.

  html,
  body {
    height: 100%; /*setting this explicitly is important*/
  }

li {
  display: flex; /*Targets each list containing the paragraphs*/
  padding: 0 20px;
  min-height: 50px;
}

li p {
  flex: 0 0 25%; /*This is the sweet sauce*/
}

li span.catty-cloud {
  border: 1px solid black;
  font-size: 0.6em;
  padding: 3px;
}

li:nth-child(2n) {
  background-color: #f2f2f2;
}
  body {
    display: flex; /*flex superpowers activated! */
    flex-direction: column; /*Stack the flex-items (main and footer elements) vertically NOT horizontally*/
    background-color: #fff;
    margin: 0;
    font-family: Lato, sans-serif;
    color: #222;
    font-size: 0.9em;
  }

    main {
  flex: 1 0 auto; /*was a flex item*/
  display: flex; /*I just included this! - now a flex container with flex items: sidebar & main content section*/
  }

  footer {
    flex: 0 0 90px; /*don't grow or shrink - just stay at a height of 90px.*/
     padding: 10px;
    color: #fff;
    background-color: rgba(61, 100, 158, .9);
  }
  aside {
    flex: 0 0 40px; /*as a flex item: do not grow or shrink. Just stay fixed at 40px*/
    display: flex; /*Now you're a flex-container, you can decide how your flex-items are laid*/
    flex-direction: column; /*Stack my flex-item's vertically...change the default direction*/
    justify-content: space-around; /*Interesting...since direction is changed, this works on the vertical direction*/
    align-items: center; /*direction is changed! This affects the horizontal direction*/
    background-color: #f2f2f2; /*make me pretty*/
  }

  /*font size for the icons*/
  aside i.fa {
    font-size: 0.9em;
  }

.content {
    display: flex;
    flex: 1 0 auto; /*this makes sure the section grows o fill the entire available space*/
    flex-direction: column;
}

.music-head {
  flex: 0 0 280px; /*Same memo, don't grow or shrink - stay at 280px*/
  display: flex;  
  padding: 40px;
  background-color: #4e4e4e;
}

.music-list {
    flex: 1 0 auto;
    list-style-type: none;
    padding: 5px 10px 0px;
}

<!DOCTYPE html>

  <html>

  <head>

  <title>Catty Music</title>

  </head>

    <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>

    <main>

  <aside> <!–This represents the sidebar and contained in it are icon sets from font-awesome–>

    <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>

  </aside>

 

<section class=”content”> <!–This section was empty. Populating it with content–>

 

  <div class=”music-head”> <!–First list item: contains music details–>

      <img src=”/udata/1mQ8VgpWlOk/cattyboard.jpg” /> <!–Album art–>

 

      <section class=”catty-music”> <!–other details of the album–>

          <div>

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

            <p>Unknown Artist</p>

            <p>2016 . Charts . ۱۰۰ songs</p>

          </div>

 

          <div> <!–Music controls–>

            <i class=”fa fa-play”> &nbsp;Play all</i>

            <i class=”fa fa-plus”> &nbsp;Add to</i>

            <i class=”fa fa-ellipsis-h”>&nbsp;&nbsp;More</i>

          </div>

      </section>

  </div> <!–end .music-head–>

 

  <ul class=”music-list”>  <!–Second list item: Contains a list of all songs displayed–>

      <li>

          <p>1. One Dance</p>

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

          <p>2:54</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

 

      <li>

          <p>2. Panda</p>

          <p>Cattee</p>

          <p>4:06</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

 

      <li>

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

          <p>Catin Cimberlake</p>

          <p>3:56</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

 

      <li>

          <p>4. Work From Home</p>

          <p>Cat Harmony feat Colla</p>

          <p>3:34</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

    </ul>

</section>  

      

</main>

  <body>

 

  <footer></footer> <!–to contain the music control buttons and song details–>

 

  </body>

</html>

از این تکنیک استفاده کنید

این تکنیک بسیار ارزشمند است. می توانید از آن برای ایجاد مناطق محتوای نابرابر استفاده کنید. بگویید ، یک نمای ۲ ستونی. یک بخش می تواند ۶۰٪ فضای موجود را اشغال کند و قسمت دیگر ۴۰٪ بخش اول: ۰ ۰ ۶۰٪؛ بخش دوم: ۰ ۰ ۴۰٪؛ شما می توانید از این روش برای ساخت سیستم های شبکه استفاده کنید. اکنون به مشکل دوم پرداخته خواهد شد.

زیباتر نشان دادن متن جزئیات آلبوم.

موارد بسیار ساده در زیر وجود دارد و تو این کار را کردی کار شما کاملاً تمام شده است.

.catty-music{
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  font-weight: 300;
  color: #fff;
  padding-left: 50px;
}

.catty-music div:nth-child(1){
  margin-bottom: auto;
}

.catty-music div:nth-child(2){
  margin-top: 0;
}

.catty-music div:nth-child(2) i.fa{
  font-size: 0.9em;
  padding: 0 0.7em;
  font-weight: 300;
}
.catty-music div:nth-child(1) p:first-child{
  font-size: 1.8em;
  margin: 0 0 10px;
}

.catty-music div:nth-child(1) p:not(:first-child){
  font-size: 0.9em;
  margin: 2px 0;
}

وای. باور نمی کنم شما به این مرحله رسیده باشید. عالیه!

  html,
  body {
    height: 100%; /*setting this explicitly is important*/
  }

li {
  display: flex; /*Targets each list containing the paragraphs*/
  padding: 0 20px;
  min-height: 50px;
}

li p {
  flex: 0 0 25%; /*This is the sweet sauce*/
}

li span.catty-cloud {
  border: 1px solid black;
  font-size: 0.6em;
  padding: 3px;
}

li:nth-child(2n) {
  background-color: #f2f2f2;
}

  body {
    display: flex; /*flex superpowers activated! */
    flex-direction: column; /*Stack the flex-items (main and footer elements) vertically NOT horizontally*/
    background-color: #fff;
    margin: 0;
    font-family: Lato, sans-serif;
    color: #222;
    font-size: 0.9em;
  }

    main {
  flex: 1 0 auto; /*was a flex item*/
  display: flex; /*I just included this! - now a flex container with flex items: sidebar & main content section*/
  }

  footer {
    flex: 0 0 90px; /*don't grow or shrink - just stay at a height of 90px.*/
     padding: 10px;
    color: #fff;
    background-color: rgba(61, 100, 158, .9);
  }

  aside {
    flex: 0 0 40px; /*as a flex item: do not grow or shrink. Just stay fixed at 40px*/
    display: flex; /*Now you're a flex-container, you can decide how your flex-items are laid*/
    flex-direction: column; /*Stack my flex-item's vertically...change the default direction*/
    justify-content: space-around; /*Interesting...since direction is changed, this works on the vertical direction*/
    align-items: center; /*direction is changed! This affects the horizontal direction*/
    background-color: #f2f2f2; /*make me pretty*/
  }

  /*font size for the icons*/
  aside i.fa {
    font-size: 0.9em;
  }

.content {
    display: flex;
    flex: 1 0 auto; /*this makes sure the section grows o fill the entire available space*/
    flex-direction: column;
}

.music-head {
  flex: 0 0 280px; /*Same memo, don't grow or shrink - stay at 280px*/
  display: flex;  
  padding: 40px;
  background-color: #4e4e4e;
}

.music-list {
    flex: 1 0 auto;
    list-style-type: none;
    padding: 5px 10px 0px;
}

.catty-music{
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  font-weight: 300;
  color: #fff;
  padding-left: 50px;
}

.catty-music div:nth-child(1){
  margin-bottom: auto;
}

.catty-music div:nth-child(2){
  margin-top: 0;
}

.catty-music div:nth-child(2) i.fa{
  font-size: 0.9em;
  padding: 0 0.7em;
  font-weight: 300;
}
.catty-music div:nth-child(1) p:first-child{
  font-size: 1.8em;
  margin: 0 0 10px;
}

.catty-music div:nth-child(1) p:not(:first-child){
  font-size: 0.9em;
  margin: 2px 0;
}

<!DOCTYPE html>

  <html>

  <head>

  <title>Catty Music</title>

  </head>

    <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>

    <main>

  <aside> <!–This represents the sidebar and contained in it are icon sets from font-awesome–>

    <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>

  </aside>

 

<section class=”content”> <!–This section was empty. Populating it with content–>

 

  <div class=”music-head”> <!–First list item: contains music details–>

 

      <img src=”/udata/1mQ8VgpWlOk/cattyboard.jpg” /> <!–Album art–>

 

      <section class=”catty-music”> <!–other details of the album–>

          <div>

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

            <p>Unknown Artist</p>

            <p>2016 . Charts . ۱۰۰ songs</p>

          </div>

 

          <div> <!–Music controls–>

            <i class=”fa fa-play”> &nbsp;Play all</i>

            <i class=”fa fa-plus”> &nbsp;Add to</i>

            <i class=”fa fa-ellipsis-h”>&nbsp;&nbsp;More</i>

          </div>

      </section>

  </div> <!–end .music-head–>

 

  <ul class=”music-list”>  <!–Second list item: Contains a list of all songs displayed–>

      <li>

          <p>1. One Dance</p>

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

          <p>2:54</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

 

      <li>

          <p>2. Panda</p>

          <p>Cattee</p>

          <p>4:06</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

 

      <li>

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

          <p>Catin Cimberlake</p>

          <p>3:56</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

 

      <li>

          <p>4. Work From Home</p>

          <p>Cat Harmony feat Colla</p>

          <p>3:34</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

    </ul>

</section>  

      

</main>

  <body>

 

  <footer></footer> <!–to contain the music control buttons and song details–>

 

  </body>

</html>

شما اکنون در حال تبدیل شدن به یک نینجا Flexbox هستید. در مرحله بعدی ، خواهید دید که Flexbox چگونه می تواند در طراحی رسپانسیو کمک کند.

بعد از قدم زدن در میان چیزهای جدی و خسته کننده ، شما لیاقت یک پروژه سرگرم کننده را دارید. زمان آن فرا رسیده است که مثالی عملی را مرور کرده و مهارتهای Flexbox خود را که به تازگی کسب کرده اید ، به کار بگیرید روزها طول کشید تا بتوانم یک پروژه خوب را ارائه دهم. به دلیل نداشتن گزینه خلاقانه ، به طرح برنامه موسیقی برای گربه ها رسیدم. من اسمش را می گذارم موسیقی کتی. شاید تا سال ۲۰۳۶ ، گربه هایی داشته باشیم که در گروه های راک جایی در مریخ آواز می خوانند 🙂 در اینجا طرح نهایی به را مشاهده می کنید و به طور کامل با Flexbox ارائه می شود.

شما می توانید آن را بصورت آنلاین در اینجا مشاهده کنید اگر آن را در یک دستگاه تلفن همراه مشاهده کنید ، ظاهری کمی متفاوت خواهید داشت. این همان چیزی است که در بخش طراحی ریسپانسیو این مقاله روی آن کار خواهید کرد. من هر چند اعتراف کردم من کاری انجام داده ام که توسط بسیاری اشتباه تلقی شده است. من طرح کلی را کاملا با Flexbox ساخته ام. به دلایل زیادی ، این ممکن است ایده آل نباشد. اما در این سناریو عمدی است. من تصمیم گرفتم تمام کارهایی که می توانید با Flexbox انجام دهید را به شما نشان دهم ، همه در یک پروژه پیچیده است. اگر کنجکاو هستید که استفاده از مدل Flexbox را درست یا غلط است ، می توانید مقاله من را در این مورد بررسی کنید. Flexbox عالی است اما در اینجا استقبال نمی شود آنجا ، آن را بررسی کرده ام. اکنون مطمئن هستم که پس از گذراندن این دوره ، هیچ کس سر من فریاد نخواهد کشید. همه چیز در موسیقی کتی با استفاده از مدل Flexbox ارائه شده است – این عمدی است برای نشان دادن آنچه ممکن است. پس بیایید این چیز را بسازیم! همانند هر پروژه معقول ، کمی برنامه ریزی برای جستجوی ناکارآمدی بسیار مفید است. بگذارید شما را از طریق یک برنامه ریزی برای ساخت طرح موسیقی گربه ای راهنمایی کنم.

پس از کجا شروع میکنی؟

هر زمان که یک طرح با flexbox درست می کنید ، باید شروع کنید به جستجوی اینکه کدام بخش از طرح شما ممکن است به عنوان ظرف فلکس برجسته شود. سپس می توانید از ویژگیهای همراستایی قدرتمندی که flexbox در دسترس شما قرار می دهد استفاده کنید.

خرابی

دوباره نگاهی به طرح تمام شده بیندازید. ممکن است بدنه حاوی کلی آن را به عنوان یک ظرف فلکس (که در تصویر زیر با حاشیه قرمز نشان داده شده است) داشته باشید و قسمتهای دیگر طرح را به عناصر فلکس تقسیم کنید (موارد ۱ و ۲).

این کاملا منطقی است ، زیرا مورد ۱ شامل هر قسمت از طرح به غیر از “پاورقی” است – بخشی که شامل دکمه های کنترل موسیقی است. آیا می دانید یک کالای فلکس نیز می تواند به یک ظرف فلکس تبدیل شود؟ بله ، ممکن است! شما می توانید تا جایی که می خواهید لانه کنید (هرچند کار عاقلانه این است که این کار را در حد معقولی حفظ کنید). بنابراین ، با آن افشاگری جدید این ممکن می شود … مورد ۱ (اولین کالای فلکس) نیز ممکن است از یک ظرف فلکس ساخته شود. نوار کناری (مورد ۱b) و بخش اصلی (مورد ۱a) سپس lex-items هستند.

هنوز با من هستی ، درسته؟ تجزیه طرح شما به این شکل یک مدل ذهنی واقعا خوب برای کار به شما می دهد. وقتی شروع به ساخت طرح های پیچیده تر با مدل Flexbox می کنید ، می بینید که این چقدر حیاتی است. مانند تصویر بالا نیازی به یک تصویر فانتزی ندارید. یک طرح ساده کاغذی خشن باید خوب باشد تا شما را به کار خود ادامه دهد. یادتان هست که من گفتم شما می توانید تا آنجا که می خواهید لانه کنید؟ به نظر می رسد شما ممکن است یک لانه سازی دیگر در اینجا انجام دهید. به بخش اصلی بالا نگاهی بیندازید (مورد ۱ a). همچنین می توان از یک ظرف فلکس برای قرار دادن بخشهایی که در زیر برجسته شده اند ، استفاده کرد. “مورد ۱a - A” و “مورد ۱a - B

شما ممکن است تصمیم بگیرید که بخش اصلی (مورد ۱a) را یک ظرف فلکس نکنید و فقط دو قسمت "div" برای قرار دادن بخش های برجسته در آن قرار دهید. بله این امکان وجود دارد ، زیرا “مورد ۱a - A” و "Item 1a - B" به صورت عمودی گذاشته شده اند. به طور پیش فرض ، "div" به صورت عمودی روی هم قرار می گیرد. این نحوه کار مدل جعبه است. اگر می خواهید بخش اصلی را به صورت flex-container در بیاورید ، ویژگی های هم ترازی قدرتمندی را که در اختیار دارید ، بدست می آورید. فقط درصورت نیاز به آنها در هر زمان. "flex" در Flexbox به معنی انعطاف پذیر است. کانتینرهای فلکس بصورت پیش فرض انعطاف پذیر بوده و از نوع رسپانسیو هستند. این ممکن است دلیل دیگری برای استفاده از ظرف فلکس در “تقسیم” های معمولی باشد. این به سناریوی مورد نظر بستگی دارد. من در هنگام ساخت موسیقی گربه ای به برخی موارد دیگر اشاره خواهم کرد. اکنون باید به نوشتن برخی از کدها بپردازید. ما با html اصلی تنظیم شده در زیر شروع خواهیم کرد:

<!DOCTYPE html>

  <html>

  <head>

  <title>Catty Music</title>

  </head>

  <body>

  <main></main> <!–to contain the main section of the app–>

  <footer></footer> <!–to contain the music control buttons and song details–>

  </body>

</html>

بنابراین این را استایل کنید …

  html,

  body {

    height: ۱۰۰%; /*setting this explicitly is important*/

  }

  body {

    display: flex; /*flex superpowers activated! */

    flex-direction: column; /*Stack the flex-items (main and footer elements) vertically NOT horizontally*/

  }

اولین قدم برای استفاده از مدل Flexbox ایجاد یک ظرف فلکس است. این دقیقاً همان کاری است که کد بالا انجام می دهد. ویژگی نمایش عنصر بدنه را به حالت خمش تنظیم می کند اکنون یک ظرف فلکس ، عنصر بدن دارید. موارد فلکس نیز تعریف شده است (مورد ۱ و مورد ۲) – همانطور که در تفکیکی که قبلاً انجام شد. توجه داشته باشید که اگر این مفهوم هنوز برای شما مبهم است ، باید به تصاویر دیگری که در تجزیه و تحلیل اولیه من نشان دادم ، نگاهی دوباره بیندازید با نگه داشتن تصویر انتها ، باید موارد قابل فلکس را فعال کنید.  

پاورقی را به قسمت پایین بچسبانید.

پاورقی که کنترل های موسیقی را در خود جای داده است باید به پایین صفحه بچسبد در حالی که قسمت اصلی فضای باقی مانده را پر می کند. چطوری این کار را انجام میدهی؟

  main {
    flex: 1 0 auto; /*fill the available space*/
  }

  footer {
    flex: 0 0 90px; /*don't grow or shrink - just stay at a height of 90px.*/
  }

با تشکر از خاصیت flex-grow. نسبتاً آسان است که بخش اصلی کل فضا را پر کند. فقط مقدار flex-grow را روی ۱ تنظیم کنید. همچنین باید ویژگی flex-shrink را روی صفر قرار دهید. چرا؟ دلیل آن ممکن است در اینجا مشهود باشد زیرا جهت انعطاف پذیری تغییر کرده است. در برخی از مرورگرها ، یک اشکال وجود دارد که اجازه می دهد آیتم های فلکس زیر اندازه محتوای آنها کوچک شوند. این رفتار کاملاً عجیبی است. راه حل این اشکال این است که مقدار flex-shrink را در ۰ قرار دادید و در پیش فرض ۱ قرار نداده اید و همچنین لطفا ویژگی flex-based را به صورت خودکار تنظیم کنید. مثل این است که بگویید: “لطفاً بر اساس اندازه محتوای خود عرض اولیه را بگیرید ، اما هرگز کوچک نشوید.” با این مقدار مختصر ، همچنان رفتار پیش فرض موارد فلکس را بدست می آورید. با تغییر اندازه مرورگر ، مورد فلکس کوچک می شود. تغییر اندازه براساس خاصیت کوچک شدن نیست. این بر اساس محاسبه مجدد عرض آیتم فلکس به طور خودکار است. flex-basis: auto این باعث می شود که مورد فلکس حداقل به اندازه عرض یا ارتفاع (در صورت اعلام) یا اندازه محتوای پیش فرض آن باشد. لطفاً چارچوبی را که برای آن ویژگیهای انعطاف پذیری خرد کردم را فراموش نکنید. موارد کوتاه مختصری در این زمینه وجود دارد. اکنون که چیزهایی با هم جمع شده اند ، کمی استایل طراحی کنید و فاصله ، رنگ و غیره را تعریف کنید.

  body {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    margin: 0;
    font-family: Lato, sans-serif;
    color: #222;
    font-size: 0.9em;
  }
  footer {
    flex: 0 0 90px;
    padding: 10px;
    color: #fff;
    background-color: rgba(61, 100, 158, .9);
  }

هنوز هیچ چیز جادویی اتفاق نیافتاده است. آنچه اکنون داریم:

  html,
  body {
    height: 100%; /*setting this explicitly is important*/
  }

  body {
    display: flex; /*flex superpowers activated! */
    flex-direction: column; /*Stack the flex-items (main and footer elements) vertically NOT horizontally*/
    background-color: #fff;
    margin: 0;
    font-family: Lato, sans-serif;
    color: #222;
    font-size: 0.9em;
  }

  main {
    flex: 1 0 auto; /*fill the available space*/
  }

  footer {
    flex: 0 0 90px; /*don't grow or shrink - just stay at a height of 90px.*/
     padding: 10px;
    color: #fff;
    background-color: rgba(61, 100, 158, .9);
  }

<!DOCTYPE html>

  <html>

  <head>

  <title>Catty Music</title>

  </head>

  <body>

  <main></main> <!–to contain the main section of the app–>

  <footer></footer> <!–to contain the music control buttons and song details–>

  </body>

</html>

با دیدن و لمس اینکه چگونه اوضاع شروع به شکل گیری می کند ، آن را حتی بهتر خواهید کرد. سند html را به روز کنید.

<main>

  <aside> <!–This represents the sidebar and contained in it are icon sets from font-awesome–>

    <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>

  </aside>

  <section class=”content”> <!–This section will house everything other than the sidebar–>

  </section>

</main>

لیست بالا کاملاً توضیحی است. برای مجموعه نمادها ، من از کتابخانه محبوب Font Awesome استفاده می کنم. داشتن نماد مورد نظر خود به سادگی اضافه کردن کلاس CSS ساده است. این همان کاری است که من در تگ aside انجام داده ام. همانطور که قبلا توضیح داده شد ، بخش “اصلی” در بالا نیز یک ظرف فلکس می باشد. نوار کناری (نشان داده شده توسط تگ aside) ، و این بخش موارد منعطفی خواهد بود.

  main {

  flex: ۱ ۰ auto; /*was a flex item*/

  display: flex; /*I just included this! – now a flex container with flex items: sidebar & main content section*/

  }

خوب ، این جالب می شود ، ها؟ اکنون قسمت اصلی را به عنوان یک ظرف فلکس در اختیار دارید. با یکی از موارد فلکس آن ، نوار کناری کنار بیایید. اینجا یک اتفاق جالب رخ داده است نوار کناری دارای نمادهایی است که به صورت عمودی روی هم چیده شده اند. می توانید یک ظرف فلکس را کنار بگذارید و یک جهت فلکس به آن بدهید که به شما اجازه می دهد همه آیکون ها به صورت عمودی و در جای خود قرار بگیرند. در زیر توضیح داده شده است.

  aside {

    flex: ۰ ۰ ۴۰px; /*as a flex item: do not grow or shrink. Just stay fixed at ۴۰px*/

    display: flex; /*Now you’re a flex-container, you can decide how your flex-items are laid*/

    flex-direction: column; /*Stack my flex-item’s vertically…change the default direction*/

    justify-content: space-around; /*Interesting…since direction is changed, this works on the vertical direction*/

    align-items: center; /*direction is changed! This affects the horizontal direction*/

    background-color: #f2f2f2; /*make me pretty*/

  }

  /*font size for the icons*/

  aside i.fa {

    font-size: ۰٫۹em;

  }

من با وسواس از طریق کد بالا نظر داده ام و اکنون می بینم که همه چیز چقدر زیبا است. فوق العاده شسته و رفته با چند خط کد. کدهای منطقی و هیچ هک کثیف.

  html,
  body {
    height: 100%; /*setting this explicitly is important*/
  }

  body {
    display: flex; /*flex superpowers activated! */
    flex-direction: column; /*Stack the flex-items (main and footer elements) vertically NOT horizontally*/
    background-color: #fff;
    margin: 0;
    font-family: Lato, sans-serif;
    color: #222;
    font-size: 0.9em;
  }

    main {
  flex: 1 0 auto; /*was a flex item*/
  display: flex; /*I just included this! - now a flex container with flex items: sidebar & main content section*/
  }
  footer {
    flex: 0 0 90px; /*don't grow or shrink - just stay at a height of 90px.*/
     padding: 10px;
    color: #fff;
    background-color: rgba(61, 100, 158, .9);
  }

  aside {
    flex: 0 0 40px; /*as a flex item: do not grow or shrink. Just stay fixed at 40px*/
    display: flex; /*Now you're a flex-container, you can decide how your flex-items are laid*/
    flex-direction: column; /*Stack my flex-item's vertically...change the default direction*/
    justify-content: space-around; /*Interesting...since direction is changed, this works on the vertical direction*/
    align-items: center; /*direction is changed! This affects the horizontal direction*/
    background-color: #f2f2f2; /*make me pretty*/
  }

  /*font size for the icons*/
  aside i.fa {
    font-size: 0.9em;
  }

<!DOCTYPE html>

  <html>

  <head>

  <title>Catty Music</title>

  </head>

    <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>

    <main>

  <aside> <!–This represents the sidebar and contained in it are icon sets from font-awesome–>

    <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>

  </aside>

  <section class=”content”> <!–This section will house everything other than the sidebar–>

  </section>

</main>

  <body>

  <main></main> <!–to contain the main section of the app–>

  <footer></footer> <!–to contain the music control buttons and song details–>

  </body>

</html>

افزودن محتوا به بخش اصلی.

قسمت محتوای اصلی خالی است اما مورد دوم را فراموش نکنید. نوار کناری اول است. مقداری محتوی در آنجا قرار دهید. شما چی فکر میکنید؟ ممکن است دوباره به پروژه به پایان رسیده نگاهی بیندازید ، بنابراین فراموش نکنید که به کجا می رویم. مهمتر از همه ، این به شما کمک می کند لیست کد بعدی را درک کنید.

<section class=”content”> <!–This section was empty. Populating it with content–>

  <div class=”music-head”> <!–First list item: contains music details–>

      <img src=”images/cattyboard.jpg” /> <!–Album art–>

      <section class=”catty-music”> <!–other details of the album–>

          <div>

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

            <p>Unknown Artist</p>

            <p>2016 . Charts . ۱۰۰ songs</p>

          </div>

          <div> <!–Music controls–>

            <i class=”fa fa-play”> &nbsp;Play all</i>

            <i class=”fa fa-plus”> &nbsp;Add to</i>

            <i class=”fa fa-ellipsis-h”>&nbsp;&nbsp;More</i>

          </div>

      </section>

  </div> <!–end .music-head–>

  <ul class=”music-list”>  <!–Second list item: Contains a list of all songs displayed–>

      <li>

          <p>1. One Dance</p>

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

          <p>2:54</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

      <li>

          <p>2. Panda</p>

          <p>Cattee</p>

          <p>4:06</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

      <li>

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

          <p>Catin Cimberlake</p>

          <p>3:56</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

      <li>

          <p>4. Work From Home</p>

          <p>Cat Harmony feat Colla</p>

          <p>3:34</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

    </ul>

</section>

اهم ، من کمی بیشتر از دفعه گذشته اضافه کردم اما بسیار ساده است. من قسمت محتوای خالی را با یک div جمع کردم که شامل آلبوم و برخی از جزئیات آلبوم گربه است. لیست نامرتب چطور؟ ul لیستی از آهنگ های آلبوم را در اختیار دارد. عنوان آهنگ ، هنرمند ، زمان و “سینک ابری گربه ای” در پاراگراف های جداگانه موجود در لیست موجود است. بنابراین شما با یک ظاهر طراحی شده چه کاری انجام می دهید؟ ببین من چیکار کردم آیا میتوانی حلش کنی؟ اول از همه ، شما باید قسمت اصلی مطالب را یک ظرف فلکس کنید.

.content {
    display: flex;
    flex: 1 0 auto; /*this makes sure the section grows o fill the entire available space*/
    flex-direction: column;
}

.music-head {

  flex: ۰ ۰ ۲۸۰px; /*Same memo, don’t grow or shrink – stay at ۲۸۰px*/

  display: flex;

  padding: ۴۰px;

  background-color: #۴e4e4e;

}

.music-list {

  flex: ۱ ۰ auto;

  list-style-type: none;

  padding: ۵px ۱۰px ۰px;

}

.music-head دارای آلبوم هنری و سایر جزئیات مربوط به آلبوم است. یادداشت مشابه ، رشد نکنید یا کوچک نشوید اما ارتفاع ۲۸۰ پیکسل را حفظ کنید. قد؟ عرض نه؟ آره! عنصر والد قبلاً جهت انعطاف پذیری را تغییر داده بود. اوه ، بعداً شما نیز به این نیاز دارید تا یک ظرف فلکس باشد. بنابراین در display قرار دهید: flex .music-list لیستی از آهنگ ها را در خود نگه می دارد و فضای موجود باقی مانده با .music-head بالا را پر می کند. این هنوز خیلی زیبا نیست اما اگر هنوز هم دنبال می کنید عالی عمل می کنید. عالیه!

  html,
  body {
    height: 100%; /*setting this explicitly is important*/
  }
  body {
    display: flex; /*flex superpowers activated! */
    flex-direction: column; /*Stack the flex-items (main and footer elements) vertically NOT horizontally*/
    background-color: #fff;
    margin: 0;
    font-family: Lato, sans-serif;
    color: #222;
    font-size: 0.9em;
  }

    main {
  flex: 1 0 auto; /*was a flex item*/
  display: flex; /*I just included this! - now a flex container with flex items: sidebar & main content section*/
  }

  footer {
    flex: 0 0 90px; /*don't grow or shrink - just stay at a height of 90px.*/
     padding: 10px;
    color: #fff;
    background-color: rgba(61, 100, 158, .9);
  }

  aside {
    flex: 0 0 40px; /*as a flex item: do not grow or shrink. Just stay fixed at 40px*/
    display: flex; /*Now you're a flex-container, you can decide how your flex-items are laid*/
    flex-direction: column; /*Stack my flex-item's vertically...change the default direction*/
    justify-content: space-around; /*Interesting...since direction is changed, this works on the vertical direction*/
    align-items: center; /*direction is changed! This affects the horizontal direction*/
    background-color: #f2f2f2; /*make me pretty*/
  }

  /*font size for the icons*/
  aside i.fa {
    font-size: 0.9em;
  }

.content {
    display: flex;
    flex: 1 0 auto; /*this makes sure the section grows o fill the entire available space*/
    flex-direction: column;
}

.music-head {
  flex: 0 0 280px; /*Same memo, don't grow or shrink - stay at 280px*/
  display: flex;  
  padding: 40px;
  background-color: #4e4e4e;
}

.music-list {
    flex: 1 0 auto;
    list-style-type: none;
    padding: 5px 10px 0px;
}

<!DOCTYPE html>

  <html>

  <head>

  <title>Catty Music</title>

  </head>

    <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>

    <main>

  <aside> <!–This represents the sidebar and contained in it are icon sets from font-awesome–>

    <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>

  </aside>

<section class=”content”> <!–This section was empty. Populating it with content–>

  <div class=”music-head”> <!–First list item: contains music details–>

      <img src=”/udata/1mQ8VgpWlOk/cattyboard.jpg” /> <!–Album art–>

      <section class=”catty-music”> <!–other details of the album–>

          <div>

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

            <p>Unknown Artist</p>

            <p>2016 . Charts . ۱۰۰ songs</p>

          </div>

          <div> <!–Music controls–>

            <i class=”fa fa-play”> &nbsp;Play all</i>

            <i class=”fa fa-plus”> &nbsp;Add to</i>

            <i class=”fa fa-ellipsis-h”>&nbsp;&nbsp;More</i>

          </div>

      </section>

  </div> <!–end .music-head–>

  <ul class=”music-list”>  <!–Second list item: Contains a list of all songs displayed–>

      <li>

          <p>1. One Dance</p>

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

          <p>2:54</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

      <li>

          <p>2. Panda</p>

          <p>Cattee</p>

          <p>4:06</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

      <li>

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

          <p>Catin Cimberlake</p>

          <p>3:56</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

      <li>

          <p>4. Work From Home</p>

          <p>Cat Harmony feat Colla</p>

          <p>3:34</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

    </ul>

</section>

</main>

  <body>

  <footer></footer> <!–to contain the music control buttons and song details–>

  </body>

</html>

در اینجا چند مشکل وجود دارد. لیست آهنگ ها وحشتناک به نظر می رسد.

بخشی که شامل هنر موسیقی است متون واقعاً زشتی دارد.

باز هم ، من شما را در حل این مشکلات راهنمایی می کنم.

در زیر راه حل های پیشنهادی من آورده شده است.

پرداختن به لیست آهنگ ها

هر لیست از آهنگ ها شامل ۴ پاراگراف است. عنوان آهنگ ، هنرمند ، مدت زمان و “سینک ابر گربه ای”. باید راهی وجود داشته باشد که همه اینها را در یک سطر قرار دهد و هر پاراگراف فضای مساوی در این خط را اشغال کند. Flexbox به نجات ما می آید! مفهوم اینجا در بسیاری از سیستم های شبکه به کار رفته است. ترجمه آن را به کد.

li {

  display: flex; /*Targets each list containing the paragraphs*/

  padding: ۰ ۲۰px;

  min-height: ۵۰px;

}

li p {

  flex: ۰ ۰ ۲۵%; /*This is the sweet sauce*/

}

می بینید که آنجا برای پاراگراف ها چه اتفاقی می افتد؟ انعطاف پذیر: ۰ ۰ ۲۵٪ “رشد نکنید یا کوچک نشوید اما هر پاراگراف باید ۲۵٪ از فضای موجود را اشغال کند”. فضا به طور مساوی بین بندها تقسیم می شود.

  html,
  body {
    height: 100%; /*setting this explicitly is important*/
  }
li {
  display: flex; /*Targets each list containing the paragraphs*/
  padding: 0 20px;
  min-height: 50px;
}

li p {
  flex: 0 0 25%; /*This is the sweet sauce*/
}

  body {
    display: flex; /*flex superpowers activated! */
    flex-direction: column; /*Stack the flex-items (main and footer elements) vertically NOT horizontally*/
    background-color: #fff;
    margin: 0;
    font-family: Lato, sans-serif;
    color: #222;
    font-size: 0.9em;
  }

    main {
  flex: 1 0 auto; /*was a flex item*/
  display: flex; /*I just included this! - now a flex container with flex items: sidebar & main content section*/
  }

  footer {
    flex: 0 0 90px; /*don't grow or shrink - just stay at a height of 90px.*/
     padding: 10px;
    color: #fff;
    background-color: rgba(61, 100, 158, .9);
  }

  aside {
    flex: 0 0 40px; /*as a flex item: do not grow or shrink. Just stay fixed at 40px*/
    display: flex; /*Now you're a flex-container, you can decide how your flex-items are laid*/
    flex-direction: column; /*Stack my flex-item's vertically...change the default direction*/
    justify-content: space-around; /*Interesting...since direction is changed, this works on the vertical direction*/
    align-items: center; /*direction is changed! This affects the horizontal direction*/
    background-color: #f2f2f2; /*make me pretty*/
  }
  /*font size for the icons*/
  aside i.fa {
    font-size: 0.9em;
  }

.content {
    display: flex;
    flex: 1 0 auto; /*this makes sure the section grows o fill the entire available space*/
    flex-direction: column;
}

.music-head {
  flex: 0 0 280px; /*Same memo, don't grow or shrink - stay at 280px*/
  display: flex;  
  padding: 40px;
  background-color: #4e4e4e;
}

.music-list {
    flex: 1 0 auto;
    list-style-type: none;
    padding: 5px 10px 0px;
}

<!DOCTYPE html>

  <html>

  <head>

  <title>Catty Music</title>

  </head>

    <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>

    <main>

  <aside> <!–This represents the sidebar and contained in it are icon sets from font-awesome–>

    <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>

  </aside>

<section class=”content”> <!–This section was empty. Populating it with content–>

  <div class=”music-head”> <!–First list item: contains music details–>

      <img src=”/udata/1mQ8VgpWlOk/cattyboard.jpg” /> <!–Album art–>

      <section class=”catty-music”> <!–other details of the album–>

          <div>

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

            <p>Unknown Artist</p>

            <p>2016 . Charts . ۱۰۰ songs</p>

          </div>

          <div> <!–Music controls–>

            <i class=”fa fa-play”> &nbsp;Play all</i>

            <i class=”fa fa-plus”> &nbsp;Add to</i>

            <i class=”fa fa-ellipsis-h”>&nbsp;&nbsp;More</i>

          </div>

      </section>

  </div> <!–end .music-head–>

  <ul class=”music-list”>  <!–Second list item: Contains a list of all songs displayed–>

      <li>

          <p>1. One Dance</p>

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

          <p>2:54</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

      <li>

          <p>2. Panda</p>

          <p>Cattee</p>

          <p>4:06</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

      <li>

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

          <p>Catin Cimberlake</p>

          <p>3:56</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

      <li>

          <p>4. Work From Home</p>

          <p>Cat Harmony feat Colla</p>

          <p>3:34</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

    </ul>

</section>

</main>

  <body>

  <footer></footer> <!–to contain the music control buttons and song details–>

  </body>

</html>

با دادن رنگهای متناوب به لیستها ، کمی بیشتر استایل کنید و با برچسب “سینک ابری گربه ای” نیز برخورد کنید.

li span.catty-cloud {
  border: 1px solid black;
  font-size: 0.6em;
  padding: 3px;
}

li:nth-child(2n) {
  background-color: #f2f2f2;
}

بنابراین ، شما آن را می کشید و واقعاً بهتر می توانید زبان انعطاف پذیر را درک کنید! این همان چیزی است که اکنون باید داشته باشید.

  html,
  body {
    height: 100%; /*setting this explicitly is important*/
  }

li {
  display: flex; /*Targets each list containing the paragraphs*/
  padding: 0 20px;
  min-height: 50px;
}

li p {
  flex: 0 0 25%; /*This is the sweet sauce*/
}

li span.catty-cloud {
  border: 1px solid black;
  font-size: 0.6em;
  padding: 3px;
}

li:nth-child(2n) {
  background-color: #f2f2f2;
}
  body {
    display: flex; /*flex superpowers activated! */
    flex-direction: column; /*Stack the flex-items (main and footer elements) vertically NOT horizontally*/
    background-color: #fff;
    margin: 0;
    font-family: Lato, sans-serif;
    color: #222;
    font-size: 0.9em;
  }

    main {
  flex: 1 0 auto; /*was a flex item*/
  display: flex; /*I just included this! - now a flex container with flex items: sidebar & main content section*/
  }

  footer {
    flex: 0 0 90px; /*don't grow or shrink - just stay at a height of 90px.*/
     padding: 10px;
    color: #fff;
    background-color: rgba(61, 100, 158, .9);
  }
  aside {
    flex: 0 0 40px; /*as a flex item: do not grow or shrink. Just stay fixed at 40px*/
    display: flex; /*Now you're a flex-container, you can decide how your flex-items are laid*/
    flex-direction: column; /*Stack my flex-item's vertically...change the default direction*/
    justify-content: space-around; /*Interesting...since direction is changed, this works on the vertical direction*/
    align-items: center; /*direction is changed! This affects the horizontal direction*/
    background-color: #f2f2f2; /*make me pretty*/
  }

  /*font size for the icons*/
  aside i.fa {
    font-size: 0.9em;
  }

.content {
    display: flex;
    flex: 1 0 auto; /*this makes sure the section grows o fill the entire available space*/
    flex-direction: column;
}

.music-head {
  flex: 0 0 280px; /*Same memo, don't grow or shrink - stay at 280px*/
  display: flex;  
  padding: 40px;
  background-color: #4e4e4e;
}

.music-list {
    flex: 1 0 auto;
    list-style-type: none;
    padding: 5px 10px 0px;
}

<!DOCTYPE html>

  <html>

  <head>

  <title>Catty Music</title>

  </head>

    <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>

    <main>

  <aside> <!–This represents the sidebar and contained in it are icon sets from font-awesome–>

    <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>

  </aside>

 

<section class=”content”> <!–This section was empty. Populating it with content–>

 

  <div class=”music-head”> <!–First list item: contains music details–>

      <img src=”/udata/1mQ8VgpWlOk/cattyboard.jpg” /> <!–Album art–>

 

      <section class=”catty-music”> <!–other details of the album–>

          <div>

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

            <p>Unknown Artist</p>

            <p>2016 . Charts . ۱۰۰ songs</p>

          </div>

 

          <div> <!–Music controls–>

            <i class=”fa fa-play”> &nbsp;Play all</i>

            <i class=”fa fa-plus”> &nbsp;Add to</i>

            <i class=”fa fa-ellipsis-h”>&nbsp;&nbsp;More</i>

          </div>

      </section>

  </div> <!–end .music-head–>

 

  <ul class=”music-list”>  <!–Second list item: Contains a list of all songs displayed–>

      <li>

          <p>1. One Dance</p>

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

          <p>2:54</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

 

      <li>

          <p>2. Panda</p>

          <p>Cattee</p>

          <p>4:06</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

 

      <li>

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

          <p>Catin Cimberlake</p>

          <p>3:56</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

 

      <li>

          <p>4. Work From Home</p>

          <p>Cat Harmony feat Colla</p>

          <p>3:34</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

    </ul>

</section>  

      

</main>

  <body>

 

  <footer></footer> <!–to contain the music control buttons and song details–>

 

  </body>

</html>

از این تکنیک استفاده کنید

این تکنیک بسیار ارزشمند است. می توانید از آن برای ایجاد مناطق محتوای نابرابر استفاده کنید. بگویید ، یک نمای ۲ ستونی. یک بخش می تواند ۶۰٪ فضای موجود را اشغال کند و قسمت دیگر ۴۰٪ بخش اول: ۰ ۰ ۶۰٪؛ بخش دوم: ۰ ۰ ۴۰٪؛ شما می توانید از این روش برای ساخت سیستم های شبکه استفاده کنید. اکنون به مشکل دوم پرداخته خواهد شد.

زیباتر نشان دادن متن جزئیات آلبوم.

موارد بسیار ساده در زیر وجود دارد و تو این کار را کردی کار شما کاملاً تمام شده است.

.catty-music{
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  font-weight: 300;
  color: #fff;
  padding-left: 50px;
}

.catty-music div:nth-child(1){
  margin-bottom: auto;
}

.catty-music div:nth-child(2){
  margin-top: 0;
}

.catty-music div:nth-child(2) i.fa{
  font-size: 0.9em;
  padding: 0 0.7em;
  font-weight: 300;
}
.catty-music div:nth-child(1) p:first-child{
  font-size: 1.8em;
  margin: 0 0 10px;
}

.catty-music div:nth-child(1) p:not(:first-child){
  font-size: 0.9em;
  margin: 2px 0;
}

وای. باور نمی کنم شما به این مرحله رسیده باشید. عالیه!

  html,
  body {
    height: 100%; /*setting this explicitly is important*/
  }

li {
  display: flex; /*Targets each list containing the paragraphs*/
  padding: 0 20px;
  min-height: 50px;
}

li p {
  flex: 0 0 25%; /*This is the sweet sauce*/
}

li span.catty-cloud {
  border: 1px solid black;
  font-size: 0.6em;
  padding: 3px;
}

li:nth-child(2n) {
  background-color: #f2f2f2;
}

  body {
    display: flex; /*flex superpowers activated! */
    flex-direction: column; /*Stack the flex-items (main and footer elements) vertically NOT horizontally*/
    background-color: #fff;
    margin: 0;
    font-family: Lato, sans-serif;
    color: #222;
    font-size: 0.9em;
  }

    main {
  flex: 1 0 auto; /*was a flex item*/
  display: flex; /*I just included this! - now a flex container with flex items: sidebar & main content section*/
  }

  footer {
    flex: 0 0 90px; /*don't grow or shrink - just stay at a height of 90px.*/
     padding: 10px;
    color: #fff;
    background-color: rgba(61, 100, 158, .9);
  }

  aside {
    flex: 0 0 40px; /*as a flex item: do not grow or shrink. Just stay fixed at 40px*/
    display: flex; /*Now you're a flex-container, you can decide how your flex-items are laid*/
    flex-direction: column; /*Stack my flex-item's vertically...change the default direction*/
    justify-content: space-around; /*Interesting...since direction is changed, this works on the vertical direction*/
    align-items: center; /*direction is changed! This affects the horizontal direction*/
    background-color: #f2f2f2; /*make me pretty*/
  }

  /*font size for the icons*/
  aside i.fa {
    font-size: 0.9em;
  }

.content {
    display: flex;
    flex: 1 0 auto; /*this makes sure the section grows o fill the entire available space*/
    flex-direction: column;
}

.music-head {
  flex: 0 0 280px; /*Same memo, don't grow or shrink - stay at 280px*/
  display: flex;  
  padding: 40px;
  background-color: #4e4e4e;
}

.music-list {
    flex: 1 0 auto;
    list-style-type: none;
    padding: 5px 10px 0px;
}

.catty-music{
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  font-weight: 300;
  color: #fff;
  padding-left: 50px;
}

.catty-music div:nth-child(1){
  margin-bottom: auto;
}

.catty-music div:nth-child(2){
  margin-top: 0;
}

.catty-music div:nth-child(2) i.fa{
  font-size: 0.9em;
  padding: 0 0.7em;
  font-weight: 300;
}
.catty-music div:nth-child(1) p:first-child{
  font-size: 1.8em;
  margin: 0 0 10px;
}

.catty-music div:nth-child(1) p:not(:first-child){
  font-size: 0.9em;
  margin: 2px 0;
}

<!DOCTYPE html>

  <html>

  <head>

  <title>Catty Music</title>

  </head>

    <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>

    <main>

  <aside> <!–This represents the sidebar and contained in it are icon sets from font-awesome–>

    <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>

  </aside>

 

<section class=”content”> <!–This section was empty. Populating it with content–>

 

  <div class=”music-head”> <!–First list item: contains music details–>

 

      <img src=”/udata/1mQ8VgpWlOk/cattyboard.jpg” /> <!–Album art–>

 

      <section class=”catty-music”> <!–other details of the album–>

          <div>

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

            <p>Unknown Artist</p>

            <p>2016 . Charts . ۱۰۰ songs</p>

          </div>

 

          <div> <!–Music controls–>

            <i class=”fa fa-play”> &nbsp;Play all</i>

            <i class=”fa fa-plus”> &nbsp;Add to</i>

            <i class=”fa fa-ellipsis-h”>&nbsp;&nbsp;More</i>

          </div>

      </section>

  </div> <!–end .music-head–>

 

  <ul class=”music-list”>  <!–Second list item: Contains a list of all songs displayed–>

      <li>

          <p>1. One Dance</p>

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

          <p>2:54</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

 

      <li>

          <p>2. Panda</p>

          <p>Cattee</p>

          <p>4:06</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

 

      <li>

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

          <p>Catin Cimberlake</p>

          <p>3:56</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

 

      <li>

          <p>4. Work From Home</p>

          <p>Cat Harmony feat Colla</p>

          <p>3:34</p>

          <p><span class=”catty-cloud”>CATTY CLOUD SYNC</span></p>

      </li>

    </ul>

</section>  

      

</main>

  <body>

 

  <footer></footer> <!–to contain the music control buttons and song details–>

 

  </body>

</html>

شما اکنون در حال تبدیل شدن به یک نینجا Flexbox هستید. در مرحله بعدی ، خواهید دید که Flexbox چگونه می تواند در طراحی رسپانسیو کمک کند.

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا