CSS - Flexbox Basics

Flexbox Basics in CSS

Child elements and a parent container are the essential components of the Flexbox layout. Once you define its display property to flex or inline-flex, the parent container becomes a flex container. Its immediate offspring instantly become expendable. Both the main (by default horizontal) and cross (by default vertical) axes form the foundation of this paradigm.

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 Basics</title>
    <style>
        .flex-container {
            display: flex;
            background-color: DodgerBlue;
        }
        .flex-item {
            width: 100px;
            margin: 10px;
            text-align: center;
            line-height: 75px;
            font-size: 16px;
            background-color: Orange;
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
    </div>
</body>
</html>

Explanation of code

HTML structure

  • The Flexbox container is a <div> element with class flex-container.
  • Three child <div> elements with the class flex-item are contained inside this container. These are objects that are flexible.

CSS Styling

  • The Flexbox context is established when.flex-container is styled with display: flex;. As a result, every immediate child of a flex item (.flex-item div) is a flex item.
  • The container's backdrop color is set to DodgerBlue to make it visible.
  • Each.flex-item has a set width of 100px, a margin between items of 10px, and a height defined by the line-height of 75px, which also centers the text within each item vertically.
  • For readability and aesthetic appeal, the products' text is centered and have an orange backdrop.

logo

CSS

Beginner 5 Hours

Flexbox Basics in CSS

Child elements and a parent container are the essential components of the Flexbox layout. Once you define its display property to flex or inline-flex, the parent container becomes a flex container. Its immediate offspring instantly become expendable. Both the main (by default horizontal) and cross (by default vertical) axes form the foundation of this paradigm.

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 Basics</title>
    <style>
        .flex-container {
            display: flex;
            background-color: DodgerBlue;
        }
        .flex-item {
            width: 100px;
            margin: 10px;
            text-align: center;
            line-height: 75px;
            font-size: 16px;
            background-color: Orange;
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
    </div>
</body>
</html>

Explanation of code

HTML structure

  • The Flexbox container is a <div> element with class flex-container.
  • Three child <div> elements with the class flex-item are contained inside this container. These are objects that are flexible.

CSS Styling

  • The Flexbox context is established when.flex-container is styled with display: flex;. As a result, every immediate child of a flex item (.flex-item div) is a flex item.
  • The container's backdrop color is set to DodgerBlue to make it visible.
  • Each.flex-item has a set width of 100px, a margin between items of 10px, and a height defined by the line-height of 75px, which also centers the text within each item vertically.
  • For readability and aesthetic appeal, the products' text is centered and have an orange backdrop.

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