flex 布局

• flex-direction: row（默认） | row-reverse | column | column-reverse;
• flex-wrap: nowrap（默认） | wrap | wrap-reverse;
• justify-content: flex-start（默认） | flex-end | center | space-between | space-around;
• align-items: flex-start（默认） | flex-end | center | baseline | stretch;
• align-content: flex-start（默认） | flex-end | center | space-between | space-around | stretch;
• align-self: auto（默认） | flex-start | flex-end | center | baseline | stretch;

flex-direction

flex-direction: row（默认） | row-reverse | column | column-reverse;

flex-direction
flex-direction: row（默认）

        
1
        
2
        
3
    
flex-direction: row-reverse

        
1
        
2
        
3
    
flex-direction: column

        
1
        
2
        
3
    
flex-direction: column-reverse

        
1
        
2
        
3
    

.box-direction {
  width: 600px;
  height: 300px;
  background: #ddd;
  display: flex;
  margin: 10px auto;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.child1 {
  width: 150px;
  background: red;
  font-size: 10px;
  height: 70px;
}
.child2 {
  width: 150px;
  background: yellow;
  font-size: 15px;
  height: 70px;
}
.child3 {
  width: 150px;
  background: blue;
  font-size: 20px;
  height: 70px;
}
.row-reverse {
  flex-direction: row-reverse;
}
.column {
  flex-direction: column;
}
.column-reverse {
  flex-direction: column-reverse;
}

flex-wrap

flex-wrap: nowrap（默认） | wrap | wrap-reverse;

flex-wrap
flex-wrap: nowrap(默认)

        
1
        
2
        
3
        
1
        
2
        
3
    
flex-wrap: wrap

        
1
        
2
        
3
        
1
        
2
        
3
    
flex-wrap: wrap-reverse

        
1
        
2
        
3
        
1
        
2
        
3
    

.box-wrap {
  width: 600px;
  height: 300px;
  background: #ddd;
  display: flex;
  margin: 10px auto;
  justify-content: flex-start;
}
.wrap {
  flex-wrap: wrap;
}
.wrap-reverse {
  flex-wrap: wrap-reverse;
}

justify-content

justify-content: flex-start（默认） | flex-end | center |
space-between | space-around;

justify-content
justify-content: left;

      
1
      
2
      
3
    

      justify-content: center;
    

      
1
      
2
      
3
    

      justify-content: space-around;
    

      
1
      
2
      
3
    

      justify-content: space-between;
    

      
1
      
2
      
3
    

      justify-content: space-evenly;
    

      
1
      
2
      
3
    

.box {
  width: 600px;
  height: 200px;
  background: #ddd;
  display: flex;
  margin: 10px auto;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.box1 {
  justify-content: center;
}
.box2 {
  justify-content: space-around;
}
.box3 {
  justify-content: space-between;
}
.box4 {
  justify-content: space-evenly;
}

align-items

align-items: flex-start（默认） | flex-end | center | baseline | stretch;

align-items
align-items: center;

      
1
      
2
      
3
    
align-items: stretch;

      
1
      
2
      
3
    
align-items: flex-end;

      
1
      
2
      
3
    
align-items: baseline;

      
1
      
2
      
3
    

.box5 {
  align-items: center;
}
.box6 {
  align-items: stretch;
}
.box7 {
  align-items: flex-end;
}
.box8 {
  align-items: baseline;
}

align-content

align-content: flex-start（默认） | flex-end | center | space-between | space-around | stretch;

align-content
align-content: center;

        
1
        
2
        
3
        
1
        
2
        
3
    
align-content: flex-end;

        
1
        
2
        
3
        
1
        
2
        
3
    
align-content: space-around;

        
1
        
2
        
3
        
1
        
2
        
3
    
align-content: space-between;

        
1
        
2
        
3
        
1
        
2
        
3
    
align-content: stretch;

        
1
        
2
        
3
        
1
        
2
        
3
    
align-content: start;(默认)

        
1
        
2
        
3
        
1
        
2
        
3
    

.box9 {
  align-content: center;
}
.box10 {
  align-content: flex-end;
}
.box11 {
  align-content: space-around;
}
.box12 {
  align-content: space-between;
}
.box13 {
  align-content: stretch;
}
.box14 {
  align-content: flex-start;
}

align-self

align-self: auto（默认） | flex-start | flex-end | center | baseline | stretch;

align-self
align-self: center;

        
1
        
2
        
3
        
1
        
2
        
3
    

.box-alignSelf {
  width: 600px;
  height: 300px;
  background: #ddd;
  display: flex;
  margin: 10px auto;
}
.self {
  align-self: center;
}

flex:1

flex:Number

      flex1:1 / flex2:1 / flex3:0   表示flex1和flex2宽度按比例缩放，flex3不缩放。按比例占有剩余空间
    

      
1
      
2
      
3
    

.flex1 {
  flex: 1;
}
.flex2 {
  flex: 1;
}
.flex3 {
  flex: 0;
}