What is align-content?

How to use align-content property?

align-content is the property of the flexbox. align-content property align with the main container it's work with content boxes. align-content will not work without flexible item it's mandatory.

The default value of the align-content is the stretch.

align-content have following value:

align-content:stretch;

align-content:flex-start;

align-content:center;

align-content:flex-end;

align-content:space-between;

align-content:space-around;

align-content:initial;

align-content:inherit;

Here is the align-content demo:

<style>

.flexContainer {

  display: flex;

  align-content: stretch;

  height: 200px;

  border: 1px solid #ccc;

  width: 500px;

}

.flexContainer .innerElement {

  background: #0bf;

  text-align: center;

  font-size: 30px;

  font-weight: 700;

  padding: 20px;

  margin: 5px;

  font-size:16px;

  color: #fff;

}

</style>

<div class="flexContainer">

  <h1 class="innerElement">1  </h1>

  <div class="innerElement">2

    <div class="abc">2 inner</div>

  </div>

  <span class="innerElement">3</span>

  <strong class="innerElement">4</strong>

</div>

align-content: stretch;

align-content: flex-start;

align-content: center;

align-content: flex-end;

align-content: space-between;

align-content: space-around;