align-content

meralesson.com

The align-content property changes the nature of the flex-warp property you can say it work with flex-wrap property also it is pretty close to align-items property but it has some different value
align-content is not very comfortable with all browser its work on few ,I'll show you how does it work and what can you do with this property

align-content: Values ;

These are the values of the Css 3 align-content property
align-content:[stretch] [center] [flex-start] [flex-end] [space-between] [space-around] [initial][inherit];
  1. [Stretch]
  2. [Center]
  3. [Flex-start]
  4. [Flex-end]
  5. [Space-between] 
  6. [Space-around]
  7. [initial]
  8. [inherit]   
  • 1[Stretch] this value is use to stretch the line to cover the existing space like below.
    #box {
       width:400px;
       height:300px;
       border: 1px solid #000000;
       display: flex;
       flex-wrap: wrap;
       align-content:stretch;
       margin: 10px;
            }
    #box div{
       width: 80px;
       height: 80px;
            }
    

    div 1

    div 2

    div 3

    div 4

    div 5

    div 6

  • 2[Center ] this value is use to vertically align middle the element  like below.
    #box {
       width:400px;
       height:300px;
       border: 1px solid #000000;
       display: flex;
       flex-wrap: wrap;
       align-content:center;
       margin: 10px;
            }
    #box div{
       width: 80px;
       height: 80px;
            }
    

    div 1

    div 2

    div 3

    div 4

    div 5

    div 6

  • 3[Flex-start] this value is use to align on the top of the container box like below.
    #box {
       width:400px;
       height:300px;
       border: 1px solid #000000;
       display: flex;
       flex-wrap: wrap;
       align-content:Flex-start;
       margin: 10px;
            }
    #box div{
       width: 80px;
       height: 80px;
            }
    

    div 1

    div 2

    div 3

    div 4

    div 5

    div 6

  • 4[Flex-end] this value is use to align bottom of the container box like below.
    #box {
       width:400px;
       height:300px;
       border: 1px solid #000000;
       display: flex;
       flex-wrap: wrap;
       align-content:Flex-end;
       margin: 10px;
            }
    #box div{
       width: 80px;
       height: 80px;
            }
    

    div 1

    div 2

    div 3

    div 4

    div 5

    div 6

  • 5[Space-between] this value is use to align top and bottom of the container box and give space in the middle like below.
    #box {
       width:400px;
       height:300px;
       border: 1px solid #000000;
       display: flex;
       flex-wrap: wrap;
       align-content:space-between;
       margin: 10px;
            }
    #box div{
       width: 80px;
       height: 80px;
            }
    

    div 1

    div 2

    div 3

    div 4

    div 5

    div 6

  • 6[Space-around] this value is also use to align top and bottom of the container box but it give space around and between it like below.
    #box {
       width:400px;
       height:300px;
       border: 1px solid #000000;
       display: flex;
       flex-wrap: wrap;
       align-content:space-around;
       margin: 10px;
            }
    #box div{
       width: 80px;
       height: 80px;
            }
    

    div 1

    div 2

    div 3

    div 4

    div 5

    div 6

  • 7[initial] this value is use to give default state like below.
    #box {
       width:400px;
       height:300px;
       border: 1px solid #000000;
       display: flex;
       flex-wrap: wrap;
       align-content:initial;
       margin: 10px;
            }
    #box div{
       width: 80px;
       height: 80px;
            }
    

    div 1

    div 2

    div 3

    div 4

    div 5

    div 6

Inherit

The [inherit] value is use to get value from its parent like below.
.color-box div{
  background: #70D8CC;  
  border:1px solid black;
  width: 80px;
  height: 80px;
}
.color-box div{
  background: inherit;  
  border:1px solid black;
  width: 80px;
  height: 80px;
}

without inherit

Inherit

Browser Support

Firefox
Chrome
Opera
Safari
28
20+
12+
9+

Comments