How To Create CSS Flexbox Layout Module For HTML Div

admin_img Posted By Bajarangi soft , Posted On 07-11-2020

In CSS The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.So today we discuss how to create flexbox

How To Create CSS Flexbox Layout Module For HTML Div

Implement CSS code for created flex container with three flex items.

<style>
    body {
        background-color: #c68c53;
    }
    .flex-container {
        display: flex;
        flex-wrap: nowrap;
        background-color: #996633;
    }

    .flex-container > div {
        background-color: #f1f1f1;
        width: 100px;
        margin: 10px;
        text-align: center;
        line-height: 75px;
        font-size: 30px;
    }
</style>
Complete Code For Creating CSS Flexbox Layout Module For HTML Div.
<!DOCTYPE html>
<html>
<head>
    <title>How To Create CSS Flexbox Layout Module For HTML Div</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
</head>

<style>
    body {
        background-color: #c68c53;
    }
    .flex-container {
        display: flex;
        flex-wrap: nowrap;
        background-color: #996633;
    }

    .flex-container > div {
        background-color: #f1f1f1;
        width: 100px;
        margin: 10px;
        text-align: center;
        line-height: 75px;
        font-size: 30px;
    }
</style>

<body>
<br/><br/>
<div class="container">
    <br>
    <div class="text-center">
        <h1 id="color" style="color: white;">Create CSS Flexbox Layout Module For HTML Div</h1>
    </div>
    <br>
    <div class="well">
        <div class="flex-container">
            <div>One</div>
            <div>Two</div>
            <div>Three</div>
            <div>Four</div>
            <div>Five</div>
            <div>Six</div>
            <div>Seven</div>
            <div>Eight</div>
        </div>
    </div>
</div>
</body>
</html>

Related Post