Welcome to DavisDay.com! Enjoy Your Visit!

CSS Flexbox

The Flexbox and what it is

A flexbox is an easy, clean, and organized layout.
A flexbox would be used to efficiently distribute space between items.
The flexbox can called and manipulated using display: flex;.


Flex Wrap

The flex wrap causes overflowing text to fall onto multiple lines, to prevent it from being unreadable. The item in the wrap will be put into a container that it fits into.

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

            <div class="container">
                <div> Button 1 </div>
                <div> Button 2 </div>
                <div> Button 3 </div>
            </div>

        
    

With this code, buttons won't end up overflowing onto each other. The top group of buttons are the buttons that have the flex, while the group of three buttons below do not. This keeps the buttons both easy functioning, and visually appealing.



Flex Grow

The flex-grow property causes the item in the container to stretch and use the available space.

        
             
            .container{
                display: flex;
            }
        
            .box{
             flex: 1 1 auto;
            }

            <div class="container">
                <div class="box" Flex Box Example </div>
                <div class="box" Flex Box </div>
                <div class="box" Example </div>
            </div>

        
    

This code keeps the div in the size of the container, making sure it grows with the flex of the item.

Flex Box Example

Flex Box

Example

The Box fills the size of the container, rather than seperating them without, as what looks like:

Flex Box Example

Flex Box

Example

Flex Align-Items

Using the flex align-items propery, the container can be manipulated into where the element is located. By default, the element will be aligned to stretch to the size of the parent. If there is no parent, the element will only be as long as the longest item.

               
            .boxExample2{
                display: flex;
                align-items: center;
            }

                <div class="boxExample2" Flex Align Centered </div>
        
    

This code will center the div to the middle of the container.

Flex Align Centered
Flex Align Centered
Flex Align