Best Jquery ,javascript, HTML5 CSS3 tutorial with jquery examples, php script , demos for beginners, web designers and web developers.

Jquery

Jquery Training

Jquery training blog

Introducation to css flexbox-part one

The below example of css flexbox showing the alignment of items within the container div irrespective of size of the item.
We can easily control the directions of the item order of the item within the container using flex box different properties.


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>






About the author

Joydeb Choudhury holds a Master's degree in Computer Application from I.G.N.O.U. After working as a web developer in various companies he has started bloging in 2016.

Recent Posts of blog

Downalod Free Php Scripts