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; }
-
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; }
-
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.
-
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.
-
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%; }
-
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; }
-
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.
-
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 TitleLorem ipsum...
Card TitleLorem ipsum...
Card TitleLorem ipsum...
Card TitleLorem ipsum...
Card TitleLorem ipsum...
Card TitleLorem ipsum...
Card TitleLorem ipsum...
Card TitleLorem 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; }
Card TitleLorem ipsum...
Card TitleLorem ipsum...
Card TitleLorem ipsum...
Card TitleLorem ipsum...
Card TitleLorem ipsum...