{"id":135066,"date":"2024-02-22T15:04:21","date_gmt":"2024-02-22T09:34:21","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?page_id=135066"},"modified":"2024-04-12T14:34:56","modified_gmt":"2024-04-12T09:04:56","slug":"creating-a-responsive-website-with-css-flexbox-setup-three-column-design-site-example","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/creating-a-responsive-website-with-css-flexbox-setup-three-column-design-site-example\/","title":{"rendered":"Creating a Responsive Website with CSS Flexbox Setup Three Column Design Site Example"},"content":{"rendered":"\n

Building a Responsive Three-Column Website with CSS Flexbox<\/strong><\/h2>\n\n\n\n

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:<\/p>\n\n\n\n

1. HTML Structure<\/strong><\/p>\n\n\n\n

Start with a basic HTML structure using semantic elements:<\/p>\n\n\n\n

HTML<\/p>\n\n\n\n

<!DOCTYPE html><\/p>\n\n\n\n

<html lang=”en”><\/p>\n\n\n\n

<head><\/p>\n\n\n\n

    <meta charset=”UTF-8″><\/p>\n\n\n\n

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

    <title>Three-Column Website<\/title><\/p>\n\n\n\n

    <link rel=”stylesheet” href=”style.css”><\/p>\n\n\n\n

<\/head><\/p>\n\n\n\n

<body><\/p>\n\n\n\n

    <header><\/p>\n\n\n\n

        <h1>My Website<\/h1><\/p>\n\n\n\n

        <nav><\/p>\n\n\n\n

            <ul><\/p>\n\n\n\n

                <li><a href=”#”>Home<\/a><\/li><\/p>\n\n\n\n

                <li><a href=”#”>About<\/a><\/li><\/p>\n\n\n\n

                <li><a href=”#”>Contact<\/a><\/li><\/p>\n\n\n\n

            <\/ul><\/p>\n\n\n\n

        <\/nav><\/p>\n\n\n\n

    <\/header><\/p>\n\n\n\n

    <main><\/p>\n\n\n\n

        <section class=”column”><\/p>\n\n\n\n

            <h2>Column 1<\/h2><\/p>\n\n\n\n

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

        <\/section><\/p>\n\n\n\n

        <section class=”column”><\/p>\n\n\n\n

            <h2>Column 2<\/h2><\/p>\n\n\n\n

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

        <\/section><\/p>\n\n\n\n

        <section class=”column”><\/p>\n\n\n\n

            <h2>Column 3<\/h2><\/p>\n\n\n\n

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

        <\/section><\/p>\n\n\n\n

    <\/main><\/p>\n\n\n\n

    <footer><\/p>\n\n\n\n

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

    <\/footer><\/p>\n\n\n\n

<\/body><\/p>\n\n\n\n

<\/html><\/p>\n\n\n\n

2. CSS Flexbox Setup<\/strong><\/p>\n\n\n\n

In your CSS file (style.css), create a flex container for the main content sections:<\/p>\n\n\n\n

CSS<\/p>\n\n\n\n

main {<\/p>\n\n\n\n

  display: flex;<\/p>\n\n\n\n

  flex-wrap: wrap; \/* Allow columns to wrap on small screens *\/<\/p>\n\n\n\n

}<\/p>\n\n\n\n

Style each column section with the .column class:<\/p>\n\n\n\n

CSS<\/p>\n\n\n\n

.column {<\/p>\n\n\n\n

  flex: 1; \/* Make columns grow equally *\/<\/p>\n\n\n\n

  padding: 1rem; \/* Add some spacing *\/<\/p>\n\n\n\n

}<\/p>\n\n\n\n

3. Responsive Adjustments<\/strong><\/p>\n\n\n\n

Use media queries to adjust the layout for different screen sizes:<\/p>\n\n\n\n

CSS<\/p>\n\n\n\n

@media (max-width: 768px) {<\/p>\n\n\n\n

  .column {<\/p>\n\n\n\n

    flex: 1 0 100%; \/* Make columns full width on small screens *\/<\/p>\n\n\n\n

  }<\/p>\n\n\n\n

}<\/p>\n\n\n\n

This code snippet ensures columns have equal width on large screens, but become full-width on screens smaller than 768px.<\/p>\n\n\n\n

4. Enhancements<\/strong><\/p>\n\n\n\n