CSS - align-items
align-items
Center the all the items in a flexible <div>
element
Property Variable Name
align-items
Available Values for align-items
stretch|center|flex-start|flex-end|baseline|initial|inherit
Examples Using align-items values
Example using align-items stretch
Example using align-items stretch
Here is an example using align-items:stretch;
Demo Box 1 Content 1
Demo Box 1 Content 2
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
Example using align-items center
Here is an example using align-items:center;
Demo Box 2 Content 1
Demo Box 2 Content 2
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
Example using align-items flex-start
Here is an example using align-items:flex-start;
Demo Box 3 Content 1
Demo Box 3 Content 2
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
Example using align-items flex-end
Here is an example using align-items:flex-end;
Demo Box 4 Content 1
Demo Box 4 Content 2
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
Example using align-items baseline
Here is an example using align-items:baseline;
Demo Box 5 Content 1
Demo Box 5 Content 2
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
Example using align-items initial
Here is an example using align-items:initial;
Demo Box 6 Content 1
Demo Box 6 Content 2
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
Example using align-items inherit
Here is an example using align-items:inherit;
Demo Box 7 Content 1
Demo Box 7 Content 2
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>