align-items

Property Variable Name

align-items

Available Values for align-items

stretch|center|flex-start|flex-end|baseline|initial|inherit

Example using align-items stretch

Here is an example using align-items:stretch;

Code

<style>
.demo-box-1 {
  border-radius:3px;
  margin-bottom:10px;
  border:1px solid #000;
  height:220px;
  width:100%;
  display: flex;
  flex-wrap: wrap;
  align-items:stretch;
}
.demo-box-1 span {
  display:inline-block;
  padding:10px;
  background:#3b7aa0;
  color:#FFF;
  margin:0 1%;
}
</style>
<h2>Example using align-items stretch</h2>
<p>Here is an example using <code>align-items:stretch;</code></p>
<div class='demo-box-1'>
  <span>Demo Box 1 Content 1</span>
  <span>Demo Box 1 Content 2</span>
</div>

Example using align-items center

Here is an example using align-items:center;

Code

<style>
.demo-box-2 {
  border-radius:3px;
  margin-bottom:10px;
  border:1px solid #000;
  height:220px;
  width:100%;
  display: flex;
  flex-wrap: wrap;
  align-items:center;
}
.demo-box-2 span {
  display:inline-block;
  padding:10px;
  background:#3b7aa0;
  color:#FFF;
  margin:0 1%;
}
</style>
<h2>Example using align-items center</h2>
<p>Here is an example using <code>align-items:center;</code></p>
<div class='demo-box-2'>
  <span>Demo Box 2 Content 1</span>
  <span>Demo Box 2 Content 2</span>
</div>

Example using align-items flex-start

Here is an example using align-items:flex-start;

Code

<style>
.demo-box-3 {
  border-radius:3px;
  margin-bottom:10px;
  border:1px solid #000;
  height:220px;
  width:100%;
  display: flex;
  flex-wrap: wrap;
  align-items:flex-start;
}
.demo-box-3 span {
  display:inline-block;
  padding:10px;
  background:#3b7aa0;
  color:#FFF;
  margin:0 1%;
}
</style>
<h2>Example using align-items flex-start</h2>
<p>Here is an example using <code>align-items:flex-start;</code></p>
<div class='demo-box-3'>
  <span>Demo Box 3 Content 1</span>
  <span>Demo Box 3 Content 2</span>
</div>

Example using align-items flex-end

Here is an example using align-items:flex-end;

Code

<style>
.demo-box-4 {
  border-radius:3px;
  margin-bottom:10px;
  border:1px solid #000;
  height:220px;
  width:100%;
  display: flex;
  flex-wrap: wrap;
  align-items:flex-end;
}
.demo-box-4 span {
  display:inline-block;
  padding:10px;
  background:#3b7aa0;
  color:#FFF;
  margin:0 1%;
}
</style>
<h2>Example using align-items flex-end</h2>
<p>Here is an example using <code>align-items:flex-end;</code></p>
<div class='demo-box-4'>
  <span>Demo Box 4 Content 1</span>
  <span>Demo Box 4 Content 2</span>
</div>

Example using align-items baseline

Here is an example using align-items:baseline;

Code

<style>
.demo-box-5 {
  border-radius:3px;
  margin-bottom:10px;
  border:1px solid #000;
  height:220px;
  width:100%;
  display: flex;
  flex-wrap: wrap;
  align-items:baseline;
}
.demo-box-5 span {
  display:inline-block;
  padding:10px;
  background:#3b7aa0;
  color:#FFF;
  margin:0 1%;
}
</style>
<h2>Example using align-items baseline</h2>
<p>Here is an example using <code>align-items:baseline;</code></p>
<div class='demo-box-5'>
  <span>Demo Box 5 Content 1</span>
  <span>Demo Box 5 Content 2</span>
</div>

Example using align-items initial

Here is an example using align-items:initial;

Code

<style>
.demo-box-6 {
  border-radius:3px;
  margin-bottom:10px;
  border:1px solid #000;
  height:220px;
  width:100%;
  display: flex;
  flex-wrap: wrap;
  align-items:initial;
}
.demo-box-6 span {
  display:inline-block;
  padding:10px;
  background:#3b7aa0;
  color:#FFF;
  margin:0 1%;
}
</style>
<h2>Example using align-items initial</h2>
<p>Here is an example using <code>align-items:initial;</code></p>
<div class='demo-box-6'>
  <span>Demo Box 6 Content 1</span>
  <span>Demo Box 6 Content 2</span>
</div>

Example using align-items inherit

Here is an example using align-items:inherit;

Code

<style>
.demo-box-7 {
  border-radius:3px;
  margin-bottom:10px;
  border:1px solid #000;
  height:220px;
  width:100%;
  display: flex;
  flex-wrap: wrap;
  align-items:inherit;
}
.demo-box-7 span {
  display:inline-block;
  padding:10px;
  background:#3b7aa0;
  color:#FFF;
  margin:0 1%;
}
</style>
<h2>Example using align-items inherit</h2>
<p>Here is an example using <code>align-items:inherit;</code></p>
<div class='demo-box-7'>
  <span>Demo Box 7 Content 1</span>
  <span>Demo Box 7 Content 2</span>
</div>