What is align-items?

How to use align-items property?

align-items is the property of the flexbox. align-items vertically align with flex items. align-items will not work without flexible item it's mandatory.

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

align-items have following value:

align-items:stretch;

align-items:flex-start;

align-items:center;

align-items:flex-end;

align-items:baseline;

align-items:initial;

align-items:inherit;

Here is the align-items demo:

 <style>

.flexContainer {

  display: flex;

  align-items: 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-items: stretch;

align-items: flex-start;

align-items: center;

align-items: flex-end;

align-items: baseline;