All examples

Layouts & positioning > Flexbox
Flexbox example: aligning across cross axis

With flexbox you can lay out items in a container along one axis. You can also specify how available space is used.

In this demo, the items have different sizes, so that it is easier to see what cross alignment is doing.

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; 
	align-items: flex-start;
	/* try setting align-items to: 
	  - flex-end; 
	  - center; 
	  - stretch; 
	*/
}

/* 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;
	}
	.flex-item:nth-child(2) {
		padding: 3em 1em;
	}
	.flex-item:nth-child(3) {
		padding: 2.5em 1.5em;
	}
}
</style>

Preview