flexbox vs grid - Wikitechy https://www.wikitechy.com/interview-questions/tag/flexbox-vs-grid/ Interview Questions Thu, 21 Apr 2022 07:21:45 +0000 en-US hourly 1 https://wordpress.org/?v=6.9 https://www.wikitechy.com/interview-questions/wp-content/uploads/2025/10/cropped-wikitechy-icon-32x32.png flexbox vs grid - Wikitechy https://www.wikitechy.com/interview-questions/tag/flexbox-vs-grid/ 32 32 What is Flexbox ? https://www.wikitechy.com/interview-questions/web-designing/what-is-flexbox/ https://www.wikitechy.com/interview-questions/web-designing/what-is-flexbox/#respond Wed, 20 Apr 2022 06:12:01 +0000 https://www.wikitechy.com/interview-questions/?p=4169
  • 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:

    ]]>     https://www.wikitechy.com/interview-questions/web-designing/what-is-flexbox/feed/ 0