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

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

  1. Two-column layout with a single left-hand sidebar
  2. Two-column layout with a single left-hand sidebar and the main column appearing first in the source code (for increasing SEO)
  3. Two-column layout with equal width left and right columns.
  4. Standard three-column left-to-right layout
  5. Three-column layout with two right-hand sidebars (i.e. blog style)
  6. Three-column layout with two left-hand-sidebars
  7. Two-column layout with column gutters (i.e. spacing between columns)
  8. Multi-column grid-style flexbox layout for rows with equal amounts of flex-items.
  9. 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.

  1. 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;
    			}
    		
    	

    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.

  2. 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.

  3. 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.

  4. 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 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.

  5. 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.

  6. 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.

  7. 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.

  8. 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;
    			}
    		
    	
    Card Title

    Lorem ipsum...

    Card Title

    Lorem ipsum...

    Card Title

    Lorem ipsum...

    Card Title

    Lorem ipsum...

    Card Title

    Lorem ipsum...

    Card Title

    Lorem ipsum...

    Card Title

    Lorem ipsum...

    Card Title

    Lorem ipsum...

  9. 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;
    			}
    		
    	
    Card Title

    Lorem ipsum...

    Card Title

    Lorem ipsum...

    Card Title

    Lorem ipsum...

    Card Title

    Lorem ipsum...

    Card Title

    Lorem ipsum...