Tech Rocks

Coldfusion
Java
JQuery

An online resource for latest web technologies like Coldfusion, JRun, Pro*C, JQuery, HTML5, PHP, W3C, Java, J2EE, C, C++, ORACLE, PL/SQL, MySql, Ajax, Coldbox, Fusebox, UNIX, JavaScript, NodeJS and much more...

Sunday, September 29, 2019

Flexbox Example

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Tests</title>
    <style>
        .fixed-container {
            display:flex;
            justify-content:space-between;
            flex-wrap: wrap;
        }
        .fixed-container div {
            width:150px;
            height:100px;
            background-color: grey;
            color:white;
            font-size:40px;
            display:flex;
        }
        .fixed-container div p{
            margin: auto;
        }

        .form-container form div {
                display:flex;
        }
        .form-container form div input {
            flex:1;
        }

        @media (min-width:900px){
            .container, .container2{
                display:flex;
                //align-items: stretch;
                justify-content:space-between;
            }
            .container2 .side-content {
                display:flex;
                flex-direction: column;
            }
        }

        .container2 .main-content {
            flex:1;
            order:1;
            background-color: beige;
        }
        .container2 .side-content {
            flex:1;
            order:2;
        }
        .container2 .side-content-2 {
            background-color: red;
            flex:1;
        }
        .container2 .side-content-1 {
            background-color: green;
            flex:1;
        }

        .container div {
            flex-basis:30%;
            box-sizing: border-box;
            padding:10px;
            background-color: beige;
        }


    </style>
</head>

<body>

<div class="container2">

    <div class="main-content">
        <h2>Lorem ipsum dolor</h2>
        <p>Lorem ipsum dolor sit ametm.</p>
    </div>

    <div class="side-content">
        <div class="side-content-1">
            <h2>Lorem ipsum dolor</h2>
            <p>Lorem ipsum dolor sit ametsollicitudin.</p>
        </div>

        <div class="side-content-2">
            <h2>Lorem ipsum dolor</h2>
            <p>Lorem ipsum dolor sit amet. </p>
        </div>
    </div>

</div>

    <div class="fixed-container">
        <div><p>1</p></div>
        <div><p>2</p></div>
        <div><p>3</p></div>
        <div><p>4</p></div>
        <div><p>5</p></div>
        <div><p>6</p></div>
    </div>

    <div class="form-container">
        <form>
            <div>
                <label for="email">Email Address:</label>
                <input id="email" type="text">
            </div>
            <div>
                <label for="name">Name:</label>
                <input id="name" type="text">
            </div>
        </form>
    </div>


    <div class="container">

        <div class="main-content">
            <h2>Lorem ipsum dolor</h2>
            <p>Lorem ipsum dolor sit amet</p>
        </div>

        <div class="side-content">
            <h2>Lorem ipsum dolor</h2>
            <p>Lorem ipsum dolor sit amet</div>

        <div class="side-content-1">
            <h2>Lorem ipsum dolor</h2>
            <p>Lorem ipsum dolor sit amet</p>
        </div>

    </div>




</body>

</html>

0 comments :

Post a Comment