HTML Flexbox

Flexbox or flexible boxes technique is used to design a HTML page layout so that it can accommodate different viewport sizes on different display devices. It is very different from the block model where it doesn’t use floats or margins.

It consists of flex containers and flex items. A flex container is defined by setting display property of an element to flex or inline-flex. A flex container contains one or multiple flex items.

.flex-container {

    display:flex;

}

It doesn’t affect the layout or positioning or anything else outside or inside of flex items. Flexbox defines the layout of flex items inside flex containers.

Following code should position 3 flex items as per their default behaviour (horizontal and from left to right):

.flex-container {

display: -webkit-flex;

display: flex;

width: 400px;

height: 250px;

background-color: lightgrey;

}

.flex-item {

background-color: cornflowerblue;

width: 100px;

height: 100px;

margin: 10px;

}

It is also possible to change the direction of the flex line. If we set the direction property to rtl (right-to-left), the text is drawn right to left, and also the flex line changes direction, which will change the page layout: