Implement a layout using a flexible box model

Creating a basic flexible container

The flex box is a CSS3 construct that provides a way to lay out elements that flow.

Flow means that the elements will flow from either left to right, also known as horizontal, or up and down, also known as vertical.

The following code creates a flexible container:

<head>
<style type="text/css">
    #flexbox1 {
        display: flexbox;
        border: 1px solid black;
        margin-top: 10px;
        min-height: 15px;
        }
</style>
</head>
<body>
    <!-- DISPLAY FLAXBOX -->
    <h3>FLEXBOX LAYOUT - display: flexbox;</h3>
    <div id="flexbox1">    </div>
</body>

All the elements within a flexbox are called flexbox items. You can specify that the flexbox layout runs horizontally or vertically.

There are some key styles that can be applied to a flexbox.

The following Table outlines the important styles related to the flow of the child elements.

Style	Option	Description
flex-direction	Column	Flows the child elements of the flexbox across the vertical axis top to bottom.
	row (default)	Flows the child elements of the flexbox along the horizontal axis left to right.
	column-reverse	Renders the child elements along the vertical axis from the reverse end bottom to top.
	row-reverse	Renders the child elements along the horizontal axis from the reverse end right to left.
flex-pack	End	Renders the child elements from the end in relation to the layout axis set direction.
	Start	Renders the child elements from the start in relation to the layout axis set direction.
	center	Renders the child elements centered on the layout axis.
	distribute	Evenly spaces the child elements along the layout axis.

The flexbox is oriented based on the flex direction. The flex direction is based on the layout axis.

If the layout of the flexbox is column, the layout axis is vertical. If the flexbox layout is row, the layout axis is horizontal.

Using inline-flex to display flexbox with child elements

The default flow inside the flexbox is to display the elements left to right starting from the left edge.

The following code uses the inline-flex to display the flexbox:

<head>
<style type="text/css">
    /* FLEXBOX WITH CHILD ELEMENTS - DISPLAY INLINE-FLEX */
    #flexbox2 {
        display:inline-flex;
        -ms-flex-direction:row;
        border: 1px solid black;
        margin-top: 10px;
        min-height: 15px;
        width:1200px;
    }
    #flexbox2 > div {
        height: 80px;
        width:80px;
        border: 1px solid black;
        margin: 5px;
    }
    #flexbox2 > div:nth-child(1) {
        background-color: green;
    }
    #flexbox2 > div:nth-child(2) {
        background-color: yellow;
    }
    #flexbox2 > div:nth-child(3){
        background-color: red;
    }
</style>
</head>
<body>
    <div id="flexbox2">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>

Using row-reverse and flex-pack to display flexbox with child elements

The row-reverse flex-direction allow to:

change the order of the boxes
moves the boxes to the right end

In order to prevent reversing the order, you will need to specify the flex-pack property to indicate the end of the layout axis.

The following CSS code demonstrates this:

<head>
<style type="text/css">
    #flexbox2 {
        display: flexbox;
        flex-flow:row-reverse;
        flex-pack:end;
        border: 1px solid black;
        margin-top: 100px;
        min-height: 15px;
        }
</style>
</head>

Using the flex and the flex-order properties

The flex property is specified on each of the children elements to designate the amount of space each should occupy.

The flex property is added to each of the children elements and takes a parameter that is a relative value.

The following CSS code demonstrates the flex and the flex-order properties:

<head>
<style type="text/css">
    #flexbox2 {
        display: flexbox;
        border: 1px solid black;
        margin-top: 100px;
        min-height: 15px;
        }
    #flexbox3 > div {          
        min-height: 80px;      
        border: 1px solid black;
        margin: 5px;            
    }
    #flexbox3 > div:nth-child(1) {
        background-color: green;
        flex-order: 2;
        flex: 2;            
    }
    #flexbox3 > div:nth-child(2) {
        background-color: yellow;
        flex-order: 2;
        /* the width of the flexbox -- not supported by all browsers */
        -ms-flex:15;
        -moz-box-flex:15;
    }
    #flexbox3 > div:nth-child(3){
        background-color: red;
        flex-order: 2;
        flex:3;      
    }     
</style>
</head>
<body>
    <div id="flexbox2">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>

Using the flex-wrap property

The flex-wrap property provides the ability to specify what the browser should do in the event that the content within the flexbox exceeds the available space of the flexbox itself.

You can specify that the flexbox should wrap or not wrap.

The following code demonstrates the flex-wrap property:

<head>
<style type="text/css">
    /* FLEXBOX WITH CHILD ELEMENT - DISPLAY ROW-REVERSE */
    #flexbox3 {
         display:inline-flex;
        -ms-flex-direction:row-reverse;
        -ms-flex-flow:row-reverse;
        border: 1px solid black;
        margin-top: 10px;
        min-height: 15px;
        width: 1200px;
    }
    #flexbox3 > div {          
        min-height: 80px;
        border: 1px solid black;
        margin: 5px;           
    }
    #flexbox3 > div:nth-child(1) {
        background-color: green;
        flex: 2;           
    }
    #flexbox3 > div:nth-child(2) {
        background-color: yellow;
        /* the width of the flexbox- not supported by all browsers */
        -ms-flex:15;
        -moz-box-flex:15;
    }
    #flexbox3 > div:nth-child(3){
        background-color: red;
        flex:3;
    }
    #flexbox3 > div:nth-child(4){
        background-color: blue;
        flex:3;            
    }
</style>
</style>
</head>
<body>
    <div id="flexbox3">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>

Ads Right