align-items | Daywalker

Wartości

stretch (default)

flex-start

center

flex-end

baseline

Kod HTML


<div class="flexbox-container">
	<div class="flexbox-item"></div>
	<div class="flexbox-item"></div>
	<div class="flexbox-item"></div>
	<div class="flexbox-item"></div>
	<div class="flexbox-item"></div>
	<div class="flexbox-item"></div>
	<div class="flexbox-item"></div>
</div>

Kod CSS


.flexbox-container {
  background: #fff;
  border: 1px solid #e3e3e3;
  height: 110px;
  display: flex;
}
  .flexbox-item { width: 100%; }
  .flexbox-item:nth-child(1)  { height: 10px; }
  .flexbox-item:nth-child(2)  { height: 15px; }
  .flexbox-item:nth-child(3)  { height: 20px; }
  .flexbox-item:nth-child(4)  { height: 25px; }
  .flexbox-item:nth-child(5)  { height: 30px; }
  .flexbox-item:nth-child(6)  { height: 20px; }
  .flexbox-item:nth-child(7)  { height: 10px; }

Zobrazowanie

stretch (d)


.flexbox-container {
  align-items: stretch;
}  
  .flexbox-item {
    height: auto; 
  }

flex-start


.flexbox-container {
  align-items: flex-start;
}

flex-end


.flexbox-container {
  align-items: flex-end;
}

center


.flexbox-container {
  align-items: center;
}

baseline


.flexbox-container {
  align-items: baseline;
}

Stylowe kategorie

Container