Menu
CSS

Flexbox

Flexbox is a CSS layout model that allows you to design complex layouts with ease. It is especially useful for creating responsive designs that adapt to different screen sizes.  there have some flexBox example

 

Display: Flex

To start using Flexbox, you need to set the display property of a container element to flex. This makes its children flex items.

<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
</div>

<style>
    .container {
        display: flex;
    }
    .item {
        background: #f4f4f4;
        margin: 10px;
        padding: 20px;
        border: 1px solid #ddd;
    }
</style>

 

Flex Direction

The flex-direction property defines the direction of the flex items inside the container. It can be row (default), row-reverse, column, or column-reverse.

<style>
    .container {
        display: flex;
        flex-direction: row; /* Items in a row */
    }
</style>

 

Justify Content

The justify-content property aligns the flex items along the main axis (horizontally if flex-direction is row). Options include flex-start, flex-end, center, space-between, space-around, and space-evenly.

<style>
    .container {
        display: flex;
        justify-content: space-between; /* Distribute items with space between */
    }
</style>

 

Align Items

The align-items property aligns the flex items along the cross axis (vertically if flex-direction is row). It can be stretch (default), flex-start, flex-end, center, or baseline.

<style>
    .container {
        display: flex;
        align-items: center; /* Center items vertically */
    }
</style>

 

Align Content

The align-content property aligns the flex lines within the flex container when there is extra space on the cross axis. It affects multi-line containers and can be flex-start, flex-end, center, space-between, space-around, or stretch.

<style>
    .container {
        display: flex;
        flex-wrap: wrap; /* Allow items to wrap */
        align-content: space-between; /* Space between rows */
    }
</style>

 

Flex Wrap

The flex-wrap property determines whether the flex items should wrap or not. It can be nowrap (default), wrap, or wrap-reverse.

<style>
    .container {
        display: flex;
        flex-wrap: wrap; /* Allow items to wrap onto multiple lines */
    }
</style>

 

Flex Basis

flex-basis: Specifies the initial size of a flex item before any growing or shrinking.

<style>
    .item {
        flex-grow: 1; /* All items grow equally */
        flex-basis: 100px; /* Initial size */
    }
</style>

 

Flex Shrink

flex-shrink: Specifies how much a flex item should shrink relative to the rest.

<style>
    .item {
        flex-grow: 1; /* All items grow equally */
        flex-shrink: 100px; /* Initial size */
    }
</style>

 

Flex Grow

flex-grow: Specifies how much a flex item should grow relative to the rest

<style>
    .item {
        flex-grow: 1; /* All items grow equally */
        flex-grow: 100px; /* Initial size */
    }
</style>

 

Example: Flexbox Layout

<div class="container">
    <div class="item">Home</div>
    <div class="item">About</div>
    <div class="item">Services</div>
    <div class="item">Contact</div>
</div>

<style>
    .container {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
        padding: 20px;
        background-color: #f0f0f0;
    }
    .item {
        background: #007BFF;
        color: white;
        padding: 15px 20px;
        margin: 5px;
        flex-grow: 1;
        text-align: center;
        border-radius: 5px;
    }
</style>

 

CSS