CSS Property align-items








The align-items property sets the alignment for the flexible container.

Summary

Initial value
stretch
Inherited
no
CSS Version
CSS3
JavaScript syntax
object.style.alignItems="center"
Animatable
no

CSS Syntax

align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;

Property Values

stretch
Default. stretch elements to fit the container
center
center elements inside the container
flex-start
position elements at the beginning of the container
flex-end
position elements at the end of the container
baseline
position elements at the baseline of the container
initial
sets to default value
inherit
Inherits this property from its parent element

Browser compatibility

align-items Yes 11.0 20.0 7.0 -webkit- Yes




Example

<!DOCTYPE html>
<html>
<style>
.flex-container {<!--   w  w  w . j av a  2 s .co m-->
  list-style: none;  
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  float: left;
}

.flex-start { 
  -webkit-align-items: flex-start;
  align-items: flex-start; 
}

.flex-end { 
  -webkit-align-items: flex-end; 
  align-items: flex-end; 
}
.flex-end li {
  background: gold;
}

.center { 
  -webkit-align-items: center; 
  align-items: center; 
}  
.center li {
  background: blue;
}

.baseline { 
  -webkit-align-items: baseline; 
  align-items: baseline; 
}
.baseline li {
  background: green;
}

.stretch { 
  -webkit-align-items: stretch; 
  align-items: stretch; 
}  
.stretch li {
  background: hotpink;
}

.flex-item {
  background: red;
  padding: 5px;
  width: 50px;
  margin: 5px;
  
  line-height: 50px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}
</style>
</head>
<body>
<ul class="flex-container flex-start">
  <li class="flex-item">1<br>2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4<br>5</li>
  <li class="flex-item">6</li>
</ul>

<ul class="flex-container flex-end">
  <li class="flex-item">1<br>2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4<br>5</li>
  <li class="flex-item">6</li>
</ul>

<ul class="flex-container center">
  <li class="flex-item">1<br>2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4<br>5</li>
  <li class="flex-item">6</li>
</ul>

<ul class="flex-container baseline">
  <li class="flex-item">1<br>2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4<br>5</li>
  <li class="flex-item">6</li>
</ul>

<ul class="flex-container stretch">
  <li class="flex-item">1<br>2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4<br>5</li>
  <li class="flex-item">6</li>
</ul>
</body>
</html>

Click to view the demo