Skip to main content

Flexible Box Layout Module | CSS Grid

Flexbox, or the Flexible Box Layout Module, is a CSS layout model that allows you to design complex layouts with ease. It is particularly useful for creating responsive designs. Here’s an overview of the key concepts and properties in the flexbox layout model:

Key Concepts​

  1. Flex Container

    • The parent element with display: flex or display: inline-flex.
    • Contains flex items.

  2. Flex Items

    • The direct children of a flex container.
    • Can be controlled using various flex properties.

Properties for the Flex Container​

  1. display

    • flex: Defines a flex container.
    • inline-flex: Defines an inline flex container.
    .container {
        display: flex;
    }

  2. flex-direction

    • Defines the main axis (direction) along which flex items are placed.
    • row (default): Left to right.
    • row-reverse: Right to left.
    • column: Top to bottom.
    • column-reverse: Bottom to top.
    .container {
        flex-direction: row;
    }

  3. flex-wrap

    • Defines whether flex items should wrap onto multiple lines.
    • nowrap (default): All flex items will be on one line.
    • wrap: Flex items will wrap onto multiple lines.
    • wrap-reverse: Flex items will wrap onto multiple lines in reverse.
    .container {
        flex-wrap: wrap;
    }

  4. flex-flow

    • A shorthand for flex-direction and flex-wrap.
    .container {
        flex-flow: row wrap;
    }

  5. justify-content

    • Defines the alignment along the main axis.
    • flex-start (default): Items are packed toward the start of the main axis.
    • flex-end: Items are packed toward the end of the main axis.
    • center: Items are centered along the main axis.
    • space-between: Items are evenly distributed with the first item at the start and the last item at the end.
    • space-around: Items are evenly distributed with equal space around them.
    • space-evenly: Items are evenly distributed with equal space between them.
    .container {
        justify-content: center;
    }

  6. align-items

    • Defines the alignment along the cross axis.
    • stretch (default): Items are stretched to fill the container.
    • flex-start: Items are aligned toward the start of the cross axis.
    • flex-end: Items are aligned toward the end of the cross axis.
    • center: Items are centered along the cross axis.
    • baseline: Items are aligned along their baselines.
    .container {
        align-items: center;
    }

  7. align-content

    • Defines the alignment of the flex lines (if flex-wrap is set to wrap).
    • stretch (default): Lines stretch to take up the remaining space.
    • flex-start: Lines are packed toward the start of the cross axis.
    • flex-end: Lines are packed toward the end of the cross axis.
    • center: Lines are centered along the cross axis.
    • space-between: Lines are evenly distributed with the first line at the start and the last line at the end.
    • space-around: Lines are evenly distributed with equal space around them.
    • space-evenly: Lines are evenly distributed with equal space between them.
    .container {
        align-content: center;
    }

Properties for Flex Items​

  1. order

    • Defines the order of the flex items.
    • Default is 0, lower values are placed first.
    .item {
        order: 1;
    }

  2. flex-grow

    • Defines how much the flex item will grow relative to the rest of the flex items.
    • Default is 0 (do not grow).
    .item {
        flex-grow: 2;
    }

  3. flex-shrink

    • Defines how much the flex item will shrink relative to the rest of the flex items.
    • Default is 1 (shrink if necessary).
    .item {
        flex-shrink: 1;
    }

  4. flex-basis

    • Defines the default size of the flex item before the remaining space is distributed.
    • Can be a length (e.g., 20%, 50px) or auto.
    .item {
        flex-basis: 100px;
    }

  5. flex

    • A shorthand for flex-grow, flex-shrink, and flex-basis.
    • Default is 0 1 auto.
    .item {
        flex: 1 0 auto;
    }

  6. align-self

    • Allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.
    • auto (default): Inherits from align-items.
    • flex-start: Aligns the item to the start of the cross axis.
    • flex-end: Aligns the item to the end of the cross axis.
    • center: Centers the item along the cross axis.
    • baseline: Aligns the item along its baseline.
    • stretch: Stretches the item to fill the container.
    .item {
        align-self: center;
    }

Example Usage​

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Example</title>
    <style>
        .container {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            align-content: space-around;
            height: 100vh;
            border: 2px solid black;
        }
        .item {
            flex: 1 1 100px; /* flex-grow, flex-shrink, flex-basis */
            margin: 10px;
            padding: 20px;
            background-color: lightblue;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
    </div>
</body>
</html>

In this example, the container is a flex container with multiple flex items. The flex properties are used to control the layout and distribution of space among the items, ensuring a responsive and adaptable design.

The display property in CSS determines how an element is displayed on a webpage. It has several values that dictate the layout behavior of elements. Here's a comprehensive list of the possible values for the display property and what each one does:

Basic Display Values​

  1. block

    • The element is displayed as a block element.
    • It starts on a new line, and takes up the full width available.
    • Examples: <div>, <p>, <h1>, <section>, <article>.
    .block {
        display: block;
    }

  2. inline

    • The element is displayed as an inline element.
    • It does not start on a new line and only takes up as much width as necessary.
    • Examples: <span>, <a>, <strong>.
    .inline {
        display: inline;
    }

  3. inline-block

    • The element is displayed as an inline-level block container.
    • It does not start on a new line but respects width and height properties.
    • Examples: <img>, <button>.
    .inline-block {
        display: inline-block;
    }

Flex and Grid Layouts​

  1. flex

    • The element becomes a flex container, allowing child elements (flex items) to be arranged according to flexbox layout rules.
    .flex {
        display: flex;
    }

  2. inline-flex

    • The element behaves like a flex container but is displayed inline.
    .inline-flex {
        display: inline-flex;
    }

  3. grid

    • The element becomes a grid container, allowing child elements to be arranged according to grid layout rules.
    .grid {
        display: grid;
    }

  4. inline-grid

    • The element behaves like a grid container but is displayed inline.
    .inline-grid {
        display: inline-grid;
    }

Table Display Types​

  1. table

    • The element behaves like a table.
    • Examples: <table>.
    .table {
        display: table;
    }

  2. table-row

    • The element behaves like a table row.
    • Examples: <tr>.
    .table-row {
        display: table-row;
    }

  3. table-cell

    • The element behaves like a table cell.
    • Examples: <td>, <th>.
    .table-cell {
        display: table-cell;
    }

  4. table-caption

    • The element behaves like a table caption.
    • Examples: <caption>.
    .table-caption {
        display: table-caption;
    }

  5. table-column

    • The element behaves like a table column.
    • Examples: <col>.
    .table-column {
        display: table-column;
    }

  6. table-column-group

    • The element behaves like a table column group.
    • Examples: <colgroup>.
    .table-column-group {
        display: table-column-group;
    }

  7. table-header-group

    • The element behaves like a table header group.
    • Examples: <thead>.
    .table-header-group {
        display: table-header-group;
    }

  8. table-footer-group

    • The element behaves like a table footer group.
    • Examples: <tfoot>.
    .table-footer-group {
        display: table-footer-group;
    }

  9. table-row-group

    • The element behaves like a table row group.
    • Examples: <tbody>.
    .table-row-group {
        display: table-row-group;
    }

Special Display Values​

  1. none

    • The element is not displayed at all (it has no effect on layout).
    • It does not occupy any space.
    .none {
        display: none;
    }

  2. contents

    • The element itself does not generate any box, but its children are still displayed as normal.
    .contents {
        display: contents;
    }

  3. run-in

    • The element is rendered as either block or inline, depending on context. This is not well-supported across browsers.
    .run-in {
        display: run-in;
    }

  4. inherit

    • The element inherits the display value from its parent.
    .inherit {
        display: inherit;
    }

  5. initial

    • The element resets the display value to its initial value.
    .initial {
        display: initial;
    }

  6. unset

    • The element resets the display value to its inherited value if it inherits from its parent or to its initial value if not.
    .unset {
        display: unset;
    }

Each of these values allows for different types of layout and rendering behavior, enabling a wide range of design possibilities for web pages.

CSS Grid Layout Module​

The CSS Grid Layout Module, commonly referred to as "CSS Grid," is a powerful tool for creating complex, responsive web layouts. It allows you to define both rows and columns, giving you precise control over the placement and alignment of elements. Here are the key concepts and properties of CSS Grid:

Key Concepts​

  1. Grid Container

    • The parent element with display: grid or display: inline-grid.
    • Contains grid items.

  2. Grid Items

    • The direct children of a grid container.
    • Can be placed into specific cells within the grid.

Properties for the Grid Container​

  1. display

    • grid: Defines a block-level grid container.
    • inline-grid: Defines an inline-level grid container.
    .container {
        display: grid;
    }

  2. grid-template-columns and grid-template-rows

    • Define the columns and rows of the grid.
    • Accept values such as lengths, percentages, or the fr unit (fraction of available space).
    .container {
        grid-template-columns: 1fr 2fr 1fr;
        grid-template-rows: 100px auto;
    }

  3. grid-template-areas

    • Defines named grid areas for layout.
    • Items can be placed into these areas using the grid-area property.
    .container {
        grid-template-areas:
            "header header header"
            "sidebar main main"
            "footer footer footer";
    }

  4. grid-template

    • A shorthand for grid-template-rows, grid-template-columns, and grid-template-areas.
    .container {
        grid-template: 
            "header header header" 100px
            "sidebar main main" auto
            "footer footer footer" 50px
            / 1fr 2fr 1fr;
    }

  5. grid-column-gap and grid-row-gap

    • Define the spacing (gutters) between columns and rows.
    .container {
        grid-column-gap: 10px;
        grid-row-gap: 15px;
    }

  6. grid-gap

    • A shorthand for grid-column-gap and grid-row-gap.
    .container {
        grid-gap: 10px 15px;
    }

  7. justify-items

    • Aligns grid items along the inline (row) axis.
    • Possible values: start, end, center, stretch.
    .container {
        justify-items: center;
    }

  8. align-items

    • Aligns grid items along the block (column) axis.
    • Possible values: start, end, center, stretch.
    .container {
        align-items: stretch;
    }

  9. justify-content

    • Aligns the grid container along the inline (row) axis.
    • Possible values: start, end, center, stretch, space-between, space-around, space-evenly.
    .container {
        justify-content: space-between;
    }

  10. align-content

    • Aligns the grid container along the block (column) axis.
    • Possible values: start, end, center, stretch, space-between, space-around, space-evenly.
    .container {
        align-content: center;
    }

Properties for Grid Items​

  1. grid-column-start and grid-column-end

    • Define the start and end positions for a grid item within the columns.
    .item {
        grid-column-start: 1;
        grid-column-end: 3;
    }

  2. grid-row-start and grid-row-end

    • Define the start and end positions for a grid item within the rows.
    .item {
        grid-row-start: 2;
        grid-row-end: 4;
    }

  3. grid-column

    • A shorthand for grid-column-start and grid-column-end.
    .item {
        grid-column: 1 / 3;
    }

  4. grid-row

    • A shorthand for grid-row-start and grid-row-end.
    .item {
        grid-row: 2 / 4;
    }

  5. grid-area

    • Specifies a grid item’s location and size using named grid areas or line numbers.
    .item {
        grid-area: header;
    }

  6. justify-self

    • Aligns a grid item along the inline (row) axis.
    • Possible values: start, end, center, stretch.
    .item {
        justify-self: end;
    }

  7. align-self

    • Aligns a grid item along the block (column) axis.
    • Possible values: start, end, center, stretch.
    .item {
        align-self: center;
    }

Example Usage​

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid Example</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: 1fr 2fr 1fr;
            grid-template-rows: 100px auto 50px;
            grid-template-areas:
                "header header header"
                "sidebar main main"
                "footer footer footer";
            grid-gap: 10px;
        }
        .header {
            grid-area: header;
            background-color: lightblue;
        }
        .sidebar {
            grid-area: sidebar;
            background-color: lightgreen;
        }
        .main {
            grid-area: main;
            background-color: lightcoral;
        }
        .footer {
            grid-area: footer;
            background-color: lightgoldenrodyellow;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">Header</div>
        <div class="sidebar">Sidebar</div>
        <div class="main">Main Content</div>
        <div class="footer">Footer</div>
    </div>
</body>
</html>

In this example, the container is a grid container with four grid items: header, sidebar, main content, and footer. The grid is defined with three columns and three rows, and grid areas are specified for layout purposes. The grid-template-areas property is used to define named areas for a clean and easy-to-read layout. The items are placed into these areas using the grid-area property.