What is Flexbox ?

  • 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:

Leave a Reply

Your email address will not be published.

You May Also Like

What is the difference between SOAP and REST ?

                  SOAP                    REST It is a protocol. It is an architectural style. SOAP- Simple Object Access Protocol. REST- Representational State Transfer. It can’t use REST because it is a…
View Answer

What is Grid system ?

It is a structure comprising a series of vertical and horizontal lines which intersect and used to arrange content. Is a way of providing a system that designers can work with…
View Answer

What is Semantic HTML ?

It is essential to understand the meaning of words during communication in any language. It becomes more critical and provides more semantic elements which make it easy to understand the…
View Answer