[CSS]關於Flexbox

時間 2019-11-08

標籤 css 關於 flexbox 欄目 CSS 简体版

原文原文鏈接

如何使用Flexbox

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

上述代碼中，ul中三個li，能夠將ul稱爲父元素，li稱爲子元素。css

要使用Flexbox，必須使父元素變成一個Flex容器。只須要顯式地設置display:flex;或display:inline-flex；便可。html

此時子元素就會變成Flex項目。dom

Flex容器屬性

flex-direction

flex-direction: row || column || row-reverse || column-reverse; //行、列和行列的反向

flex-wrap

flex-wrap: wrap || nowrap || wrap-reverse; //換行、不換行、反向換行

flex-flow

flex-flow是flex-direction和flex-wrap兩個屬性的速記屬性。ide

justify-content

justify-content: flex-start || flex-end || center || space-between || space-around； //左對齊、右對齊、居中、相同間隔、相同空間

align-items

align-items: flex-start || flex-end || center || stretch || baseline； //頂部對齊、底部對齊、垂直居中、使項目和容器高度一致、基線對齊

align-content

align-items: flex-start || flex-end || center || stretch； //頂部對齊、底部對齊、垂直居中、使項目和容器高度一致

Flex項目屬性

order

按order的值從小到大排列。flex

flex-grow和flex-shrink

flex-grow和flex-shrink屬性控制Flex項目在容器有多餘的空間如何放大（擴展），在沒有額外空間又如何縮小。spa

flex-basis

flex-basis屬性能夠指定Flex項目的初始大小。設計

flex

flex是flex-grow、flex-shrink和flex-basis三個屬性的速記。code

*:flex: 2 1 0 與寫爲 flex: 2 是同樣的，2 表示任何正數。cdn

align-self

align-self: auto || flex-start || flex-end || center || baseline || stretch;

絕對項目和相對項目

絕對Flex項目的寬度只基於 flex 屬性，而相對Flex項目的寬度基於內容大小。htm

Auto-margin對齊

當在Flex項目上使用 margin: auto 時，值爲 auto 的方向（左、右或者兩者都是）會佔據全部剩餘空間。

切換flex-direction

若是將 flex-direction 切換爲 column，它就再也不遵循英語的範式，而是日語的範式，即從右到左爲Cross Axis，從上到下爲Main Axis。

總結

閱讀完原文連接中的文章收穫頗多，瞭解了Flex模型，跟着最後的提示作出了一個相關demo。同時也瞭解了響應式設計的一點皮毛。

源碼

<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <title>Catty Music</title>
    <link rel="stylesheet" href="flexdemo.css">
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
  </head>
  <body>
    <main>
      <aside class="sm-hide">
        <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">
        <div class="music-head">
          <img src="./2.jpg" />
          <section class="catty-music">
              <div>
                  <p>CattyBoard Top 100 Single Charts (11.06.36)</p>
                  <p>Unknown Artist</p>
                  <p>2016 . Charts . 100 songs</p>
              </div>
              <div>
                <i class="fa fa-play">Play all</i>
                <i class="fa fa-plus">Add to</i>
                <i class="fa fa-ellipsis-h">More</i>
              </div>
          </section>
            
        </div>

        <ul class="music-list">
            <li>
              <p>1. One Dance</p>
              <p class="sm-hide">Crake feat CatKid & Cyla</p>
              <p class="music-time">2:54</p>
              <p class="sm-hide"><span class="catty-cloud">CATTY CLOUD SYNC</span></p>
            </li>
            <li>
              <p>2. Panda</p>
              <p class="sm-hide">Cattee</p>
              <p class="music-time">4:06</p>
              <p class="sm-hide"><span class="catty-cloud">CATTY CLOUD SYNC</span></p>
            </li>
            <li>
              <p>3. Can't Stop the Feeling!</p>
              <p class="sm-hide">Catin Cimberlake</p>
              <p class="music-time">3:56</p>
              <p class="sm-hide"><span class="catty-cloud">CATTY CLOUD SYNC</span></p>
            </li>
            <li>
              <p>4. Work From Home</p>
              <p class="sm-hide">Cat Harmony feat Colla</p>
              <p class="music-time">3:34</p>
              <p class="sm-hide"><span class="catty-cloud">CATTY CLOUD SYNC</span></p>
            </li>
        </ul>
      </section>
    </main>
    <footer>
      <div class="music-info">
        <img src="./2.jpg" />
        <section class="music-info2">
          <p>If It Ain't Love</p>
          <p>Castson Derulo</p>
        </section>
      </div>
      <div class="music-control">
        <i class="fa fa-step-backward"></i>
        <i class="fa fa-pause"></i>
        <i class="fa fa-forward"></i>
        <i class="fa fa-stop-circle"></i>
        <i class="fa fa-random"></i>
      </div>
    </footer>
  </body>
</html>

* {
    box-sizing: border-box;
}
html,body{
  height: 100%;
}
body{
  display: flex;
  flex-direction: column;
  background-color: #fff;
  margin: 0;
  color: #222;
  font-size: .9em;
}
main{
  flex: 1 0 auto;
  display: flex;
}
aside{
  flex: 0 0 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  background-color: #f2f2f2;
}
aside i.fa{
  font-size: .9em;
}
.content{
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
}
.music-head{
  flex: 0 0 280px;
  display: flex;
  padding: 40px;
  background-color: #4e4e4e;
}
.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: .9em;
  padding: 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;
}
.music-list{
  flex: 1 0 auto;
  list-style-type: none;
  padding: 5px 10px 0px;
}
li{
  display: flex;
  padding: 0 20px;
  min-height: 50px;
}
li p{
  flex: 0 0 25%;
}
li span.catty-cloud{
  border: 1px solid black;
  font-size: .6em;
  padding: 3px;
}
li:nth-child(2n){
  background-color: #f2f2f2;
}
footer{
  flex: 0 0 90px;
  padding: 10px;
  color: #fff;
  background-color: #BC2F2E;
  display: flex;
}

.music-info{
  display: flex;
  margin-right: auto;
}
.music-control{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 30%;
}
.music-info img{
  width: 90px;
  padding-right: 10px;
}

@media screen and (max-width:64em){
  .sm-hide{
    display: none;
  }
  .music-head{
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 0;
    background-color: #4e4e4e;
  }
  .catty-music{
    text-align: center;
    padding: 0;
  }
  .catty-music div:nth-child(1) p:first-child{
    margin: 20px 0;
    font-size: 1em;
  }
  .music-head img{
    width: 50%;
    margin-bottom: 10px;
  }
  .music-time{
    text-align: right;
  }
  li p{
    flex: 0 0 50%;
  }
  .music-control{
    justify-content: space-around;
  }
  
}

1. [轉]關於flexbox
2. 關於flexbox
3. CSS基礎-Flexbox
4. CSS Flexbox詳解
5. 關於FlexBox的佈局
6. 通過Flexbox Froggy遊戲自學CSS Flexbox
7. CSS之flexbox指南
8. CSS佈局 0x8 flexbox
9. CSS：關於CSS Hack
10. css佈局之flexbox學習
更多相關文章...
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• CSS 指南 - 網站建設指南
• NewSQL-TiDB相關
• ☆基於Java Instrument的Agent實現

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。