9 CSS Flexbox Layouts for Your Business Website, Portfolio, or Blog

Published January 04, 2021 — by Floyd Hartford

I've coded 9 CSS flexbox layouts that you can use for your business website, portfolio, blog, landing pages, web apps, and more.

These nine web page layouts are simple examples. Meant as a starting point, you can customize the CSS styles and content within the flex boxes to your needs. Use them as an outer web page shell or as stacked flexbox containers within your website's theme and layout.

Flexbox creates flexible robust layouts to fit almost any website theming requirements. And, as of writing it's still the most cross-browser compatible way to create most types of grid layouts – a clear step up from simple CSS floats and more broadly supported than CSS grid.

The nine layouts include

Two-column layout with a single left-hand sidebar
Two-column layout with a single left-hand sidebar and the main column appearing first in the source code (for increasing SEO)
Two-column layout with equal width left and right columns.
Standard three-column left-to-right layout
Three-column layout with two right-hand sidebars (i.e. blog style)
Three-column layout with two left-hand-sidebars
Two-column layout with column gutters (i.e. spacing between columns)
Multi-column grid-style flexbox layout for rows with equal amounts of flex-items.
Multi-column grid-style flexbox layout to left-align the final grid row when the row has orphan flex-items (i.e. when the last row is not a full row)

Keep scrolling to see all nine CSS flexbox layouts in action.

CSS flexbox website layouts are perfect creating many different styles of web page layouts and spatial relations.

Example: Two Column Website with Left Sidebar

Use CSS Flexbox for a two-column website layout with a fluid-width main-content area and a fixed-width sidebar on the left.

HTML
```
		
			<div class="flexbox flexbox--sidebar-left">
				<div class="sidebar"></div>
				<div class="main"></div>
			</div>
		
	
```
CSS
```
		
			.flexbox--sidebar-left .sidebar {
				flex: 0 1 auto;
				width: 25%;
			}
			.flexbox--sidebar-left .main {
				flex: 1 auto;
			}
		
	
```
Sidebar (left)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.
Main content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.

Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus.
Example: Two Column Website with Left Sidebar (Main Content First)

Use CSS Flexbox for a two-column website layout with a fluid-width main-content area and a fixed-width sidebar on the left where the main content come first in the source code.

HTML
```
		
			<div class="flexbox flexbox--sidebar-left">
				<div class="main"></div>
				<div class="sidebar"></div>
			</div>
		
	
```
CSS
```
		
			.flexbox--sidebar-left--main-first .sidebar {
				order: 1;
				flex: 0 1 auto;
				width: 25%;
			}
			.flexbox--sidebar-left--main-first .main {
				flex: 1 auto;
				order: 2;
			}
		
	
```
Main content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.

Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus.
Sidebar (left)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.
Example: Two Column Website with Equal Width Columns

Use CSS Flexbox for a two-column website layout with equal width columns.

HTML
```
		
			<div class="flexbox flexbox--equal-width-two-columns">
				<div class="main"></div>
				<div class="sidebar"></div>
			</div>
		
	
```
CSS
```
		
			.flexbox--equal-width-two-columns {
				justify-content: space-between;
			}
			.flexbox--equal-width-two-columns > div {
				flex: 0 1 auto;
				width: 50%;
			}
		
	
```
Column One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.

Column Two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.
Example: Three Column Website Layout (Standard)

Use CSS Flexbox for a three-column website layout with left-to-right standard structure (similar to how floats work).

HTML
```
		
			<div class="flexbox flexbox--three-column-standard">
				<div class="sidebar"></div>
				<div class="main"></div>
				<div class="sidebar"></div>
			</div>
		
	
```
CSS
```
		
			.flexbox--three-column-standard {
				justify-content: space-between;
			}
			.flexbox--three-column-standard > div {
				flex: 0 1 auto;
				width: 33.33%;
			}
		
	
```
Column Two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.

Column One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.

Column Three

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.
Example: Three Column Website Layout (Blog Style)

Use CSS Flexbox for a three-column website layout with a fluid-width main content area that comes first in the code and double right-side sidebars.

HTML
```
		
			<div class="flexbox flexbox--three-column-double-right-sidebar">
				<div class="main"></div>
				<div class="sidebar"></div>
				<div class="sidebar"></div>
			</div>
		
	
```
CSS
```
		.flexbox--three-column-double-right-sidebar {
			justify-content: space-between;
		}
		.flexbox--three-column-double-right-sidebar > div {
			flex: 0 1 auto;
		}
		.flexbox--three-column-double-right-sidebar > .main {
			width: 50%;
		}
		.flexbox--three-column-double-right-sidebar > .sidebar {
			width: 25%;
		}
	
```
Column One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.

Column Two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.

Column Three

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.
Example: Three Column Website Layout

Use CSS Flexbox for a three-column website layout with a fluid-width main content area that comes first in the code and double left-side sidebars.

HTML
```
		
			<div class="flexbox flexbox--three-column-double-left-sidebar">
				<div class="main"></div>
				<div class="sidebar"></div>
				<div class="sidebar"></div>
			</div>
		
	
```
CSS
```
		
			.flexbox--three-column-double-left-sidebar {
				justify-content: space-between;
			}
			.flexbox--three-column-double-left-sidebar > div {
				flex: 0 1 auto;
			}
			.flexbox--three-column-double-left-sidebar > .main {
				width: 50%;
				order: 3;
			}
			.flexbox--three-column-double-left-sidebar > .sidebar {
				width: 25%;
				order: 1;
			}
		
	
```
Column One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.

Column Two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.

Column Three

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.
Example: Adding Gutters Between Flexbox Columns

Use CSS margins to add gutters between flexbox columns on your website page layout.

HTML
```
		
			<div class="flexbox flexbox--add-gutters">
				<div class="main"></div>
				<div class="sidebar"></div>
			</div>
		
	
```
CSS
```
		
			.flexbox--add-gutters {
				justify-content: space-between;
			}
			.flexbox--add-gutters .main {
				flex: 1 auto;
				order: 2;
			}
			.flexbox--add-gutters .sidebar {
				flex: 1 0 auto;
				order: 1;
				margin-right: 25px;
			}
		
	
```
Main Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.
Sidebar
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet

Example: Flexbox Cards Grid-Style Website Layout

Use CSS Flexbox to create a grid-style website layout of equal sized cards.

HTML

		
			<div class="flexbox flexbox--card-grid">
				<div class="card">
					<div class="card__header">
						<span class="card__title">Card Title</span>
					</div>
					<div class="card__body">
						<p>Lorem ipsum...</p>
					</div>
					<div class="card__footer">
						<button>Action</button>
					</div>
				</div>
				...
				<!-- more cards, as needed -->
			</div>

CSS

		
			.flexbox--card-grid {
				justify-content: space-between;
				flex-flow: row wrap;
				align-items: stretch;
			}
			.flexbox--card-grid .card {
				flex: 0 1 auto;
			}
			.card {
				margin: 20px auto;
				width: 20%;
				border: 1px solid #c5c5c5;
				text-align: center;
			}
			.card__header {
				padding: 12px;
			}
			.card__title {
				font-weight: 700;
			}
			.card__body {
				padding: 12px;
				min-height: 180px;
			}
			.card_footer {
				padding: 12px;
			}

Lorem ipsum...

Example: Flexbox Grid with Last Item Aligned Left

Use CSS Flexbox to create a simple grid with the last row of items aligned to the left — even if the last row contains orphans (i.e. not enough items to create a full row, which by default would be centered. The trick is to create a flexible-width final element using the flex container's pseudo-after element (::after).

HTML

		
			<div class="flexbox flexbox--grid-aligned-left">
				<div class="card">
					<div class="card__header">
						<span class="card__title">Card Title</span>
					</div>
					<div class="card__body">
						<p>Lorem ipsum...</p>
					</div>
					<div class="card__footer">
						<button>Action</button>
					</div>
				</div>
				...
				<!-- more cards, as needed -->
			</div>

CSS

		
			.flexbox--grid-aligned-left {
				justify-content: space-between;
				flex-flow: row wrap;
			}
			.flexbox--grid-aligned-left::after {
				flex: auto;
				content: '';
			}
			.flexbox--grid-aligned-left .card {
				flex: 0 1 auto;
			}
			.card {
				margin: 20px auto;
				width: 20%;
				border: 1px solid #c5c5c5;
				text-align: center;
			}
			.card__header {
				padding: 12px;
			}
			.card__title {
				font-weight: 700;
			}
			.card__body {
				padding: 12px;
				min-height: 180px;
			}
			.card_footer {
				padding: 12px;
			}

Lorem ipsum...

About the Author Hey, I'm Floyd. I'm a website solutions developer from Maine. I code HTML, CSS, Javascript, PHP, and SQL to build websites for ~~businesses~~ people.

The words and opinions expressed here are my own.

Do you need website development services? Request a quote.

Example: Two Column Website with Left Sidebar

HTML

CSS

Sidebar (left)

Main content

Example: Two Column Website with Left Sidebar (Main Content First)

HTML

CSS

Main content

Sidebar (left)

Example: Two Column Website with Equal Width Columns

HTML

CSS

Column One

Column Two

Example: Three Column Website Layout (Standard)

HTML

CSS

Column Two

Column One

Column Three

Example: Three Column Website Layout (Blog Style)

HTML

CSS

Column One

Column Two

Column Three

Example: Three Column Website Layout

HTML

CSS

Column One

Column Two

Column Three

Example: Adding Gutters Between Flexbox Columns

HTML

CSS

Main Content

Sidebar

Example: Flexbox Cards Grid-Style Website Layout

HTML

CSS

Example: Flexbox Grid with Last Item Aligned Left

HTML

CSS