Creating a Responsive Website with CSS Flexbox Setup Three Column Design Site Example

Building a Responsive Three-Column Website with CSS Flexbox

Flexbox is a powerful layout system in CSS that excels at creating responsive designs. Here’s how you can use it to build a three-column website:

1. HTML Structure

Start with a basic HTML structure using semantic elements:

HTML

<!DOCTYPE html>

<html lang=”en”>

<head>

    <meta charset=”UTF-8″>

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

    <title>Three-Column Website</title>

    <link rel=”stylesheet” href=”style.css”>

</head>

<body>

    <header>

        <h1>My Website</h1>

        <nav>

            <ul>

                <li><a href=”#”>Home</a></li>

                <li><a href=”#”>About</a></li>

                <li><a href=”#”>Contact</a></li>

            </ul>

        </nav>

    </header>

    <main>

        <section class=”column”>

            <h2>Column 1</h2>

            <p>Content for column 1…</p>

        </section>

        <section class=”column”>

            <h2>Column 2</h2>

            <p>Content for column 2…</p>

        </section>

        <section class=”column”>

            <h2>Column 3</h2>

            <p>Content for column 3…</p>

        </section>

    </main>

    <footer>

        <p>&copy; 2024 My Website</p>

    </footer>

</body>

</html>

2. CSS Flexbox Setup

In your CSS file (style.css), create a flex container for the main content sections:

CSS

main {

  display: flex;

  flex-wrap: wrap; /* Allow columns to wrap on small screens */

}

Style each column section with the .column class:

CSS

.column {

  flex: 1; /* Make columns grow equally */

  padding: 1rem; /* Add some spacing */

}

3. Responsive Adjustments

Use media queries to adjust the layout for different screen sizes:

CSS

@media (max-width: 768px) {

  .column {

    flex: 1 0 100%; /* Make columns full width on small screens */

  }

}

This code snippet ensures columns have equal width on large screens, but become full-width on screens smaller than 768px.

4. Enhancements

  • Add margins and padding for better visual hierarchy.
  • Use media queries for even more granular control over different screen sizes.
  • Consider Flexbox properties like justify-content and align-items for precise alignment.
  • Explore hover effects, background colors, and other styles to customize your design.

Benefits of using Flexbox

  • Easy to create responsive layouts.
  • Offers flexibility in arranging elements.
  • More maintainable code compared to floats.

Remember, this is a basic example. You can customize and extend it further to create unique and visually appealing three-column websites!

Go back to tutorial

How to Create a Simple CSS Styled Website Responsive Website CSS Float
How to Create a Fully Responsive Website with CSS Grid Modern Web Design CSS

Get industry recognized certification – Contact us

keyboard_arrow_up
Open chat
Need help?
Hello 👋
Can we help you?