微信小程序开发--flex布局

{
  "usingComponents": {},
  "backgroundTextStyle": "dark",
  "navigationBarBackgroundColor": "#0e0e0e",
  "navigationBarTitleText": "Music Player",
  "navigationBarTextStyle": "white"
}

class="root">
  
  class="tabs">
    class="item active">
      个性推荐
    
    class="item">
      歌单
    
    class="item">
      主播电台
    
    class="item">
      排行榜
    
  
  
  class="content" scroll-y>
    class="slide">
      "../images/slide.png">
      
    
    class="portals">
      class="item">
        "../images/04.png">
        私人FM
      
      class="item">
        "../images/05.png">
        每日歌曲推荐
      
      class="item">
        "../images/06.png">
        云音乐新歌榜
      
    

    class="list">
      class="title">
        推荐歌单
      
      class="inner">
        class="item">
          "../images/poster.jpg">
          一生中最爱的人
        
        class="item">
          "../images/poster.jpg">
          一生中最爱的人
        
        class="item">
          "../images/poster.jpg">
          一生中最爱的人
        
        class="item">
          "../images/poster.jpg">
          一生中最爱的人
        
        class="item">
          "../images/poster.jpg">
          一生中最爱的人
        
        class="item">
          "../images/poster.jpg">
          一生中最爱的人
        
      
    
  
  
  class="player">
    class="poster">
      "../images/poster.jpg">
    
    class="info">
      class="title">一生中最爱
      class="artes">谭咏麟
    
    class="controls">
      "../images/01.png">
      "../images/02.png">
      "../images/03.png">
    
  

 

/**index.wxss**/

page {
  height: 100%;
}

.root {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #f0f0f0;
  overflow: hidden;
}

.tabs {
  background: pink;
  display: flex;
}

.tabs .item {
  flex: 1;
  text-align: center;
  font-size: 12px;
  background: #222;
  color: #ccc;
  padding: 8px 0;
}

.tabs .item.active {
  color: #fff;
  border-bottom: 2px solid #e9232c;
}

.content {
  flex: 1;
  background: #111214;
  color: #ccc;
  overflow: hidden;
}

.slide image{
  width: 100%;
  height: 130px; 
}

.portals{
  display: flex;
  margin-bottom: 15px;
}
.portals .item{
  flex: 1;
}
.portals .item image{
  width: 60px;
  height: 60px;
  display: block;
  margin: 10px auto;
}
.portals .item text{
  font-size:12px;
  text-align: center;
  display: block;
}

.list .title{
  margin: 5px 10px;
  font-size:14px;
}

.list .inner{
 display: flex;
 flex-wrap: wrap;
 /* warp 换行 */
}

.list .inner .item{
  width: 33.33333333%
}
.list .inner .item image{
  width: 120px;
  height: 120px;
  display: block;
  margin: auto;
}

.list .inner .item text{
  font-size:14px;
}
.player {
  height: 50px;
  background: #17181a;
  display: flex;
}

.poster image {
  width: 40px;
  height: 40px;
  margin: 5px;
}

.info {
  flex: 1;
  color:#888;
  font-size:14px;
  margin: 5px;
}
.info .title{
  display: block;
  font-size: 16px;
  color: #ccc;

}

.controls image {
  width: 40px;
  height: 40px;
  margin: 5px 2px;
}