Before the Flexbox Layout module, there were four layout modes:

• Block, for sections in a webpage
• Inline, for text
• Table, for two-dimensional table data
• Positioned, for explicit position of an element

Example: A flex container with three flex items:

                        
                            <div class="flex-container">
                                <div>1</div>
                                <div>2</div>
                                <div>3</div>
                            </div>
                        
                    

Parent Element (Container)

                        
                            .flex-container {
                                display: flex;
                            }
                        
                    

The flex container properties are:

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

Perfect centering: Set both the justify-content and align-items properties to center, and the flex item will be perfectly centered:

                        .flex-container {
                            display: flex;
                            height: 300px;
                            justify-content: center;
                            align-items: center;
                        }
                    

The direct child elements of a flex container automatically becomes flexible (flex) items.

                        <div class="flex-container">
                            <div>1</div>
                            <div>2</div>
                            <div>3</div>
                            <div>4</div>
                        </div>
                    

The flex item properties are:

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

Responsive Flexbox

                        .flex-container {
                            display: flex;
                            flex-wrap: wrap;
                          }

                          .flex-item-left {
                            flex: 50%;
                          }

                          .flex-item-right {
                            flex: 50%;
                          }

                          /* Responsive layout - makes a one column layout instead of a two-column layout */
                          @media (max-width: 800px) {
                            .flex-item-right, .flex-item-left {
                              flex: 100%;
                            }
                          }
                    

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

                        .grid-container {
                            display: grid;
                            grid-template-columns: auto auto auto;
                        }