justify-content | Daywalker

Wartości

flex-start (default)

flex-end

center

space-around

space-between

space-evenly

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;
  display: flex;
}
  .flexbox-item {
    padding:15px 10px;
  }

Zobrazowanie

flex-start (d)


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

flex-end


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

center


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

space-around


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

space-between


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

space-evenly


.flexbox-container { 
  justify-content: space-evenly;
}

Stylowe kategorie

Container