Layouts & positioning > Flexbox

Flexbox example: aligning across main axis

Example code

							<div class="flex-container">
  <div class="flex-item">A</div>
  <div class="flex-item">B</div>
  <div class="flex-item">C</div>
  <div class="flex-item">D</div>
</div>

<style>
.flex-container {
  display: flex; 
	justify-content: flex-start;
	/* try setting justify-content to: 
	  - flex-end; 
	  - center; 
	  - space-between;
		- space-around;
		- space-evenly 
	*/
}

/* for demonstration */
@layer for-demo {
	.flex-container {
		background-color: hotpink; 
		min-height: 20em;
		align-items: flex-start;
	}
	.flex-item {
		aspect-ratio: 1 / 1;
		border-radius: .25em;
		background-color: #fff;
		border: 1px solid #ccc;
		padding: 1em;
		margin: .5em;
	}
}
</style>