The Flexbox Layout or css flexible Box Layout Module is new layout module in CSS3 aims at providing a more efficient way to lay out, align and distribute space among items in a container even when they are with dynamic or unknown size.
The ability to modify the width or height (and order) of its children to fill the available space is the main characteristic of the flexbox container. A flex container expands items to fill available free space. mostly to accommodate to all kind of display devices and screen sizes.

A flex container expands the items within it to fill available space as well as shrinks them to prevent overflow.
The display order of flexbox elements is independent of their order in the source code so good layout can be achieved easily with cleaner code.

Css flexible boxes use the terms main axis and cross axis. If flex-direction were column, then main axis would be vertical and horizontal would be the cross axis.

 Flex container  :
The css flex container is the parent element in which flex items are contained. 
A flex container is defined using the flex or inline-flex values of the display property.
Flex item 
The child of a flex container is termed as flex item. 

There are other properties also, I will discuss about other properties in the next post

Css FLexbox example


<!DOCTYPE html>
<html>
<head>
<style>
.flex-container-box {
display: flex;
flex-direction: row;
background-color: #a6a6d4;
justify-content: space-around;
flex-wrap:wrap;
}

.flex-container-box>div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>

<div class="flex-container-box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
</div>

</body>
</html>

Leave comment

Your email address will not be published. Required fields are marked with *.