How do you put items next to each other using Flexbox?

on

 The Flexible Box Layout Module makes it easier to design flexible, responsive layout structures without using float or positioning.

Let's take the following example to answer this question.



Use this code to create it

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

<title>Login Template</title>

  <meta name="description" content="">

  <meta name="author" content="">

<meta property="og:title" content="">

  <meta property="og:type" content="">

  <meta property="og:url" content="">

  <meta property="og:description" content="">

  <meta property="og:image" content="">

<link rel="icon" href="/favicon.ico">

  <link rel="stylesheet" href="assets/css/bootstrap.min.css?v=1.0">

  <link rel="stylesheet" href="assets/css/style.css?v=1.0">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

">


</head>

<style>

.first-div

{

    background: blue;

    padding: 30px;

    margin-top: 50px;

}

.sec-div

{

    display: flex;

    flex-direction: row;

}

.left-sec-div

{

    background: red;

    padding: 50px;

    width: 50%;

}

.right-sec-div

{

    background: green;

    padding: 50px;

     width: 50%;

}

</style>

<body>

  <div class="container">

    <div class="first-div">

    </div>

    <div class="sec-div">

        <div class="left-sec-div">

        </div>

        <div class="right-sec-div">

        </div>

    </div>

  </div>

  <script src="assets/js/jquery-3.2.1.slim.min.js"></script>

   <script src="assets/js/bootstrap.min.js"></script>

    <script src="assets/js/bootstrap.bundle.min.js"></script>

</body>

</html>


I hope this article will help you. Kindly share it with others. Thank you!

Comments

Post a Comment