Introduction To Flexbox

Introducing Flexbox

Let's say you're styling a website, and decide to try and place some 200px*200px blocks into a container that's 500px high and 90% of the width of the screen. What is wrong with this picture?

            
                #initial {
                    background-color: #003049;
                    width: 90%;
                    height: 500px;
                    margin: 0 auto;
                    border: 5px solid #003049;
                }
                
                #initial div {
                    width: 200px;
                    height: 200px;
                }
            
        

The answer? It doesn't have Flexbox. The 500px*90% <section> above contains 3 divs, each of which is styled inline for simplicity. Initially, all divs have a height and width of 200px. However, we our boxes to fit the container! This can be achieved either by shifting the parameters of the container itself, or by shrinking down! Luckily, CSS offers a way of doing this!

Flexbox (short for Flexible Box Layout) is a layout mode in CSS that makes it easier to design flexible and responsive layouts. Using the property <display:flex> allows for a more efficient way to lay out, align, and distribute space among items in a container, even when their size is unknown or dynamic. I will demonstrate this using 5 divs in the next parts of this course.

Advantages of using Flexbox

• It allows items to stretch and shrink to fill available space, or to distribute space evenly between items.
• It makes it easy to align items along a main axis (horizontally or vertically) and a cross axis (perpendicular to the main axis).
• It simplifies the process of creating layouts that work on different screen sizes and devices.
• It makes it easier to create flexible grid layouts and to rearrange items in a layout.

Disadvantages of using Flexbox

• It can be confusing to learn at first, since it has a lot of different properties and values.
• It may not work well with older browsers that do not support Flexbox.
• It is not suitable for creating more complex layouts, such as multi-column layouts or grid systems with irregularly sized items.

Overall, Flexbox is a powerful tool for creating flexible and responsive layouts, and it is especially useful for laying out items in a single dimension (e.g. a list of items). However, it may not be the best choice for more complex layouts, and you may need to use other layout techniques in combination with Flexbox to achieve your desired design.

To continute, let's move on to Part 1, and talk about <display:flex> in more detail!