align-content | Daywalker

Wartości

stretch

(default)

flex-start

center

flex-end

space-between

space-around

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: 140px;
  display: flex;
}
	.flexbox-item { 
      width: 20%; 
      height: 20px;
    }

Zobrazowanie

stretch (d)


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

flex-start


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

flex-end


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

center


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

space-around


.flexbox-container {
  align-content: space-around;
}

space-between


.flexbox-container {
  align-content: space-between;
}

space-evenly


.flexbox-container {
  align-content: space-around;
}

Stylowe kategorie

Container