Align-content

Расположение вдоль вспомогательной оси нескольких строк flex-child

Это свойство работает только если главная ось состоит из более чем одной строки:

  .flex-parent {
    flex-wrap: wrap;
  }
      

• flex-start

  
    .flex-parent { 
      flex-wrap: wrap;        
      align-content: flex-start;
    }  
          

  1

  2

  4

  3

  5

  6

• flex-end

  
    .flex-parent { 
      flex-wrap: wrap;        
      align-content: flex-end;
    }  
          

  1

  2

  4

  3

  5

  6

• stretch

  
    .flex-parent { 
      height: auto
      flex-wrap: wrap;        
      align-content: stretch;
    }  
          

  1

  2

  4

  3

  5

  6

• center

  
    .flex-parent { 
      flex-wrap: wrap;        
      align-content: center;
    }  
          

  1

  2

  4

  3

  5

  6

• space-between

  
    .flex-parent { 
      flex-wrap: wrap;        
      align-content: space-between;
    }  
          

  1

  2

  4

  3

  5

  6

• space-around

  
    .flex-parent { 
      flex-wrap: wrap;        
      align-content: space-around;
    }  
          

  1

  2

  4

  3

  5

  6