[CSS]关于Flexbox

摘要：如何使用上述代码中，中三个，可以将称为父元素，称为子元素。此时子元素就会变成项目。与写为是一样的，表示任何正数。总结阅读完原文链接中的文章收获颇多，了解了模型，跟着最后的提示做出了一个相关。同时也了解了响应式设计的一点皮毛。

</>复制代码 
    
    
    

上述代码中，ul中三个li，可以将ul称为父元素，li称为子元素。

要使用Flexbox，必须使父元素变成一个Flex容器。只需要显式地设置display:flex;或display:inline-flex；即可。

此时子元素就会变成Flex项目。

</>复制代码 
flex-direction: row || column || row-reverse || column-reverse; //行、列和行列的反向

</>复制代码 
flex-wrap: wrap || nowrap || wrap-reverse; //换行、不换行、反向换行

flex-flow是flex-direction和flex-wrap两个属性的速记属性。

</>复制代码 
justify-content: flex-start || flex-end || center || space-between || space-around； //左对齐、右对齐、居中、相同间隔、相同空间

</>复制代码 
align-items: flex-start || flex-end || center || stretch || baseline； //顶部对齐、底部对齐、垂直居中、使项目和容器高度一致、基线对齐

</>复制代码 
align-items: flex-start || flex-end || center || stretch； //顶部对齐、底部对齐、垂直居中、使项目和容器高度一致

按order的值从小到大排列。

flex-grow和flex-shrink属性控制Flex项目在容器有多余的空间如何放大（扩展），在没有额外空间又如何缩小。

flex-basis属性可以指定Flex项目的初始大小。

flex是flex-grow、flex-shrink和flex-basis三个属性的速记。

*:flex: 2 1 0 与写为 flex: 2 是一样的，2 表示任何正数。

</>复制代码 
align-self: auto || flex-start || flex-end || center || baseline || stretch;

绝对Flex项目的宽度只基于 flex 属性，而相对Flex项目的宽度基于内容大小。

当在Flex项目上使用 margin: auto 时，值为 auto 的方向（左、右或者二者都是）会占据所有剩余空间。

如果将 flex-direction 切换为 column，它就不再遵循英语的范式，而是日语的范式，即从右到左为Cross Axis，从上到下为Main Axis。

阅读完原文链接中的文章收获颇多，了解了Flex模型，跟着最后的提示做出了一个相关demo。同时也了解了响应式设计的一点皮毛。

</>复制代码 
  
    
    
    
    
  
  
    
      
        
        
        
        
        
        
        
        
      
      
        
          
          
              
                  
CattyBoard Top 100 Single Charts (11.06.36)
                  
Unknown Artist
                  
2016 . Charts . 100 songs
              
              
                Play all
                Add to
                More
              
          
            
        
        
            
              
1. One Dance
              
Crake feat CatKid & Cyla
              
2:54
              
CATTY CLOUD SYNC
            
            
              
2. Panda
              
Cattee
              
4:06
              
CATTY CLOUD SYNC
            
            
              
3. Can"t Stop the Feeling!
              
Catin Cimberlake
              
3:56
              
CATTY CLOUD SYNC
            
            
              
4. Work From Home
              
Cat Harmony feat Colla
              
3:34
              
CATTY CLOUD SYNC
            
        
      
    
    
      
        
        
          
If It Ain"t Love
          
Castson Derulo
        
      
      
        
        
        
        
        
      
    
  

</>复制代码 
* {
    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;
  }
  
}