Introduction to CSS Flexbox

CSS Flexbox, short for Flexible Box Layout, offers a streamlined way to design adaptable and visually appealing layouts. It works primarily in one dimension (row or column) to intelligently distribute space among elements within a container, resulting in clean alignment and responsive designs suitable for various screen sizes. Flexbox is perfect for crafting both smaller components and overall webpage structures.

Features of flexbox:

High flexibility
Arrangement & alignment of items
Proper spacing
Order & sequencing of items
Bootstrap 4 is built on top of the flex layout

Before the Flexbox Model:

Block: Sections in web pages
Inline: Text
Table: Two-dimensional table data
Positioned: Explicit position of an element

Flexbox Components:

Flex Container: The parent div containing various divisions.
Flex Items: The items inside the container div.

Creating a Flexbox:

To create a flexbox, set the display property of the container to flex.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Flexbox Tutorial</title>
    <style>
    .flex-container {
        display: flex;
        background-color: #32a852;
    }
    
    .flex-container div {
        background-color: #c9d1cb;
        margin: 10px;
        padding: 10px;
    }
    </style>
</head>

<body>
    <h2>w3wiki</h2>
    <h4> Flexbox</h4>
    <div class="flex-container">
        <div>Item1</div>
        <div>Item2</div>
        <div>Item3</div>
    </div>
</body>

</html>

Output:

Flexbox Axes:

Flexbox operates on two axes:

Main Axis: Runs from left to right by default.
Cross Axis: Perpendicular to the main axis, runs from top to bottom.

1. Main Axis:

Main Start: The start of the main axis.
Main Size: The length between Main Start and Main End.
Main End: The endpoint of the main axis.

2. Cross Axis:

The cross axis will be perpendicular to the main axis.

Cross Start: The start of the cross axis.
Cross Size: The length between Cross Start and Cross End.
Cross End: The endpoint of the cross axis.

Flex Direction Properties:

Left to Right: flex-direction: row;
Right to Left: flex-direction: row-reverse;
Top to Bottom: flex-direction: column;
Bottom to Top: flex-direction: column-reverse;

Aligning and Justifying Content:

Flexbox provides several properties for aligning and justifying content within the container:

justify-content: Aligns items along the main axis (e.g., flex-start, flex-end, center, space-between, space-around).
align-items: Aligns items along the cross axis (e.g., stretch, center, flex-start, flex-end).
align-content: Aligns rows within a flex container when there is extra space on the cross axis.

Responsive Design with Flexbox:

Flexbox excels in creating responsive designs by adjusting items to fit various screen sizes. You can use media queries in combination with Flexbox properties to ensure your layout adapts seamlessly to different devices.

Example of Responsive Flexbox:

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Responsive Flexbox</title>
    <style>
    .flex-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        background-color: #32a852;
    }
    .flex-container div {
        background-color: #c9d1cb;
        margin: 10px;
        padding: 20px;
        flex: 1 1 200px;
    }
    @media (max-width: 600px) {
        .flex-container {
            flex-direction: column;
        }
    }
    </style>
</head>
<body>
    <h2>Responsive Flexbox</h2>
    <div class="flex-container">
        <div>Item1</div>
        <div>Item2</div>
        <div>Item3</div>
    </div>
</body>
</html>

Output:

Responsive Design with Flexbox

CSS Flexbox is an essential tool for creating flexible and responsive web layouts. Its ability to distribute space and align items effectively makes it a vital part of modern web design. Understanding its properties and axes can significantly improve the adaptability and aesthetics of your web pages.

Supported Browsers:

Google Chrome 29.0
Firefox 22.0
Microsoft Edge 11.0
Opera 48.0
Safari 10.0

Tags:

#CSS #Web Technologies

CSS bottom Property

CSS Flexbox and Its Properties