CSS - Building a Layout with Flexbox

Building a Layout with Flexbox using CSS

Flexbox is great for creating intricate layouts with more flexibility and less code. You might make a card grid that resizes to fit the screen or a responsive navigation bar.

Code Sample

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Layout</title>
    <style>
        .nav-bar {
            display: flex;
            justify-content: space-between;
            list-style-type: none;
            padding: 0;
            background-color: #333;
            color: white;
        }
        .nav-item {
            padding: 14px 20px;
        }
        .main-content {
            display: flex;
            flex-wrap: wrap;
            padding: 20px;
        }
        .card {
            flex: 1 1 200px;
            margin: 10px;
            padding: 20px;
            background-color: #f9f9f9;
            box-shadow: 0 2px 5px 0 rgba(0,0,0,0.26);
        }
    </style>
</head>
<body>
    <ul class="nav-bar">
        <li class="nav-item">Home</li>
        <li class="nav-item">About</li>
        <li class="nav-item">Services</li>
        <li class="nav-item">Contact</li>
    </ul>
    <div class="main-content">
        <div class="card">Content 1</div>
        <div class="card">Content 2</div>
        <div class="card">Content 3</div>
        <div class="card">Content 4</div>
    </div>
</body>
</html>

Explanation of code

HTML structure

  • The page has two sections: the main content area (main-content) and the navigation bar (nav-bar).
  • The list items (nav-item) in the nav-bar, which is an unordered list, stand in for navigation links.
  • There are many div elements with class cards in the main-content section, each of which represents a content card.

 

CSS Styling

  • The navigation elements are arranged horizontally by.nav-bar using display: flex;. The space-between property of justify-content arranges the navigation elements uniformly over the container's width.
  • On a dark (#333) backdrop, each menu item has white text with a constant padding.
  • In addition, display: flex; and flex-wrap: wrap; are used in the.main-content to enable things to wrap into the following line in the event that there is not enough room on the current line.

logo

CSS

Beginner 5 Hours

Building a Layout with Flexbox using CSS

Flexbox is great for creating intricate layouts with more flexibility and less code. You might make a card grid that resizes to fit the screen or a responsive navigation bar.

Code Sample

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Layout</title>
    <style>
        .nav-bar {
            display: flex;
            justify-content: space-between;
            list-style-type: none;
            padding: 0;
            background-color: #333;
            color: white;
        }
        .nav-item {
            padding: 14px 20px;
        }
        .main-content {
            display: flex;
            flex-wrap: wrap;
            padding: 20px;
        }
        .card {
            flex: 1 1 200px;
            margin: 10px;
            padding: 20px;
            background-color: #f9f9f9;
            box-shadow: 0 2px 5px 0 rgba(0,0,0,0.26);
        }
    </style>
</head>
<body>
    <ul class="nav-bar">
        <li class="nav-item">Home</li>
        <li class="nav-item">About</li>
        <li class="nav-item">Services</li>
        <li class="nav-item">Contact</li>
    </ul>
    <div class="main-content">
        <div class="card">Content 1</div>
        <div class="card">Content 2</div>
        <div class="card">Content 3</div>
        <div class="card">Content 4</div>
    </div>
</body>
</html>

Explanation of code

HTML structure

  • The page has two sections: the main content area (main-content) and the navigation bar (nav-bar).
  • The list items (nav-item) in the nav-bar, which is an unordered list, stand in for navigation links.
  • There are many div elements with class cards in the main-content section, each of which represents a content card.

 

CSS Styling

  • The navigation elements are arranged horizontally by.nav-bar using display: flex;. The space-between property of justify-content arranges the navigation elements uniformly over the container's width.
  • On a dark (#333) backdrop, each menu item has white text with a constant padding.
  • In addition, display: flex; and flex-wrap: wrap; are used in the.main-content to enable things to wrap into the following line in the event that there is not enough room on the current line.

Related Tutorials

Frequently Asked Questions for CSS

Content, padding, border, and margin make up the box model.

Relative moves from original position; absolute positions relative to nearest positioned ancestor.

id is unique; class can be reused.

visibility hides but keeps space; display removes element from layout.

Minify files, reduce specificity, and remove unused styles.

Overrides all other declarations, regardless of specificity.

Use margin: auto or flexbox/grid techniques.

Allow responsive design by applying styles based on screen size or device.

Define relationships between selectors: descendant ( ), child (>), adjacent (+), sibling (~).

Tools like SASS or LESS add features like variables and nesting to CSS.

Targets part of an element, like ::before or ::after.

Use @import "filename.css"; at the top of the file.

Controls stacking order of overlapping elements.

Forces a property to inherit value from parent.

Static — not affected by top, bottom, left, or right.

Use universal selector * or define styles in body/root.

em is relative to parent; rem is relative to root element.

Inline, internal (embedded), and external CSS.

A layout model for arranging elements in rows or columns with flexible sizing.

Targets elements in a specific state, like :hover or :nth-child().

Use fluid layouts, media queries, and relative units.

CSS styles HTML elements to control layout, color, fonts, and responsiveness.

Reusable custom property values, declared with --var-name.

Determines which rule applies when multiple rules target the same element.

Performs calculations to dynamically set CSS property values.

line

Copyrights © 2024 letsupdateskills All rights reserved