flex布局实例深入全面总结

2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

通过笔者大量实践，发现flex布局屡试不爽，尤其在移动端自适应方面。但处于其大量的属性记忆混乱，今天图文并茂梳理如下。

结合笛卡尔坐标系（仅考虑一个item情况，其它情况可以据此的排列组合实现）

.box {
  display: flex;
  width: 50px;
  height: 50px;
  border: 1px solid #ccc;
  border-radius: 2px;
}
.box .item{
    display: inline-block;
    width: 10px;
    height: 10px;
    margin:3px;
    border-radius: 50%;
    background: #000;
}

.c2{
    justify-content: center;
}

.c3{
    justify-content: flex-end;
}

.c4{
    align-items: center;
}

.c5{
  align-items: flex-end;
}

.c6{
  justify-content: center;
  align-items: center;
}

.c7{
    justify-content: flex-end;
  align-items: center;
}


.c8{
  justify-content: center;
  align-items: flex-end;
}

.c9{
  justify-content: flex-end;
    align-items: flex-end;
}


.c21{
    justify-content: space-between;
}

.c22{
    justify-content: space-between;
    flex-direction: column;
}

.c23{
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
}

.c24{
    justify-content: space-between;
    flex-direction: column;
     align-items: flex-end;
}


.c25 .item:nth-child(2) {
     align-self: center;
}

.c26{
    justify-content: space-between;
}
.c26 .item:nth-child(2) {
     align-self:  flex-end;
}



.c31 .item:nth-child(2) {
     align-self:  center;
}
.c31 .item:nth-child(3) {
     align-self:  flex-end;
}

.c41 {
    flex-wrap: wrap;
  justify-content: flex-end;
  align-content: space-between;
}

.c42 {
    flex-wrap: wrap;
  align-content: space-between;
}
.column {
  flex-basis: 100%;
  display: flex;
  justify-content: space-between;
}

.c61{
    flex-wrap: wrap;
}
.row{
  flex-basis: 100%;
  display:flex;
}

.row:nth-child(2){
  justify-content: center;
}

.row:nth-child(3){
  justify-content: space-between;
}

.c9{
    flex-wrap: wrap;
}



.Grid {
  display: flex;
}

.Grid-cell {
  flex: 1;
}

.Grid-cell.u-full {
  flex: 0 0 100%;
}

.Grid-cell.u-1of2 {
  flex: 0 0 50%;
}

.Grid-cell.u-1of3 {
  flex: 0 0 33.3333%;
}

.Grid-cell.u-1of4 {
  flex: 0 0 25%;
}


.fh {
    display: flex;
    min-height: 98vh;
    flex-direction: column;
    margin: 1rem;
}

.fh-header {
    display: flex;
    flex: 1.2;
    border: 1px solid #ccc;
}

.fh>.fh-middle {
    flex: 1;
    border: 1px solid #ccc;
    margin: 1rem 0;
}

.fh>.fh-footer {
    flex: 2.5;
    border: 1px solid #ccc;
}

.fh-content {
    flex: 1;
    border: 1px solid #ccc;
}

.fh-nav {
    
    flex: 0 0 20rem;
    border: 1px solid #ccc;
}

.fh-nav {
    
    order: -1;
    margin-right: 1rem;
}

.InputAddOn {
  display: flex;
}

.InputAddOn-field {
  flex: 1;
}

.Media {
  display: flex;
  align-items: flex-start;
}

.Media-figure {
  margin-right: 1em;
}

.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.Site-content {
  flex: 1;
}

.parent {
  width: 200px;
  height: 150px;
  background-color: black;
  display: flex;
  flex-flow: row wrap;
}

.child {
  box-sizing: border-box;
  background-color: white;
  flex: 0 0 25%;
  height: 50px;
  border: 1px solid red;
}

    
    
    


骰子的布局（左0中1右2，上0间1下2）
1.1一个左上(0,0):justify-content:flex-start(default);
    
 
    
1.2一个中上(1,0):justify-content:center;
    
 
    
1.3一个右上(2,0):justify-content:flex-end;
    
 
    
1.4一个左间(0,1) 
  :align-items: center;
    
 
    
1.5一个左下(0,2):align-items: flex-end;
    
 
    
1.6一个中间(1,1):justify-content: center;align-items:center;
    
 
    
1.7一个右间(2,1):justify-content:flex-end;align-items:center;
    
 
    
1.8一个中下(1,2) :justify-content:center;align-items:flex-end;
    
 
      
1.9一个右下(2,2) justify-content: flex-end;
  align-items: flex-end;
    
 
    
2.1两个space-between
    
 
 
    
2.2两个space-between+flex-direction
    
 
 
    
2.3两个space-between+flex-direction+ align-items
    
 
 
    
2.4两个space-between+flex-direction+ align-items：flex-end
    
 
 
    
2.5两个align-self
    
 
 
    
2.6两个align-self
    
 
 
    

3.1三个align-self：center+flex-end
    
 
 
 
    
4.1四个
    
 
 
 
 
    
4.2四个
    
 
     
     
 
 
     
     
 
    
6.1六个

  
    
    
    
  
  
    
  
  
     
     
  

9九个
    
     
     
     
     
     
     
     
     
     
  
网格布局

2.1基本网格布局

  Grid-cell
  Grid-cell
  Grid-cell

2.2百分比布局

  u-1of4
  ...
  u-1of3


圣杯布局

    

 
 
mian
    
    middle
    

输入框的布局


  icon
  
  btn

悬挂式布局

  
  
...

固定低栏

  
header
  
main 
  

流式布局