Align Form Elements tutorial in Flexbox CSS

 <!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Align Form Elements Flexbox CSS</title>
    <link rel="stylesheet" href="css/Align_Form_Elements_Flexbox_CSS.css">
</head>

<body>
    <h1>Hello World : Align Form with Flexbox</h1>
    <form action="">
        <ul id="wrapper">
            <li>
                <label for="">Name</label>
                <input type="text">
            </li>
            <li>
                <label for="">Class Name</label>
                <input type="text">
            </li>
            <li>
                <label for="">Email Address</label>
                <input type="email">
            </li>
            <li>
                <button type="submit">Save</button>
            </li>
        </ul>
    </form>
</body>

</html>



Below File is css/Align_Form_Elements_Flexbox_CSS.css File
body {
    font-family: arial, helvetica;
}

h1 {
    padding: 0 0 0 40px;
}

#wrapper {
    background: #eee;
    list-style: none;
    margin: 50px;
    padding: 20px;
}

#wrapper li {
    display: flex;
    justify-content: flex-end;
    padding: 5px 0;
}

#wrapper li label {
    flex: 1;
}

@media screen and ((min-width:300px) and (max-width:499px)) {
    #wrapper li {
        flex-direction: column;
    }

    #wrapper li input {
        flex: 3;
    }
}

@media screen and (min-width:500px) {
    #wrapper li input {
        flex: 3;
    }
}

@media screen and (min-width:768px) {
    #wrapper li input {
        flex: 4;
    }
}

@media screen and (min-width:992px) {
    #wrapper li input {
        flex: 6;
    }
}

@media screen and (min-width:1200px) {
    #wrapper li input {
        flex: 8;
    }
}






Comments

Post a Comment