• It is a one-dimensional layout model that has efficient and flexible layouts with distributed spaces among items to control their alignment structure in CSS .
  • It is a layout model that provides a clean and easy way to arrange items within a container.
  • It is responsive and mobile-friendly & it can be useful for creating small-scale layouts.
  • In this, there are two main components in flexbox:
    1. Flex container – Is the parent “div” which contains various divisions.
    2. Flex items – In this, the items inside the container “div”.

For example,

             <!DOCTYPE html>
             <html>
 
             <head>
                  <title>Flexbox Tutorial</title>
                  <style>
                 .flex-container {
                     display: flex;
                     background-color: #32a852;
                 }
     
                .flex-container div {
                    background-color: #c9d1cb;
                    margin: 10px;
                    padding: 10px;
                 }
                 </style>
             </head>
 
             <body>
                 <h2>Welcome to kaashiv</h2>
                 <h4> Flexbox</h4>
                 <div class="flex-container">
                     <div>Item1</div>
                     <div>Item2</div>
                     <div>Item3</div>
                  </div>
              </body>
 
              </html>

Output:

Categorized in:

Web Designing

Tagged in:

, , , , , , , , , , , ,