CSS3 Flex Box
The CSS3 flex layout model provides a simple and powerful mechanism for handling the distributing of space and alignment of content automatically through stylesheet without interfering the actual markup.

Flexbox consists of flex containers and flex items. A flex container can be created by setting the display property of an element to either flex (generate block-level flex container) or inline-flex (generate an inline flex container similar to inline-block). All child elements of flex container automatically become flex items and are laid out using the flex layout model. The float, clear, and vertical-align properties have no effect on flex items.
Equal Flex Column Layout
<!DOCTYPE html>
<head>
<title>Equal Flex Column Layout</title>
 
<style type="text/css">
 
.flex-container { 
width: 80%; 
min-height: 200px; 
margin: 0 auto; 
font-size: 32px; 
display: -webkit-flex; 
display: flex; 
border: 1px solid #808080;
}
.flex-container div { 
padding: 10px; 
background: #F60; 
-webkit-flex: 1; 
-ms-flex: 1; flex: 1; 
}
 
.flex-container div.bg-alt{background: #0099da;}
 
</style>
</head>
<body>
 
     <div class="flex-container">
        <div class="item1">Column 1</div>
        <div class="item2 bg-alt">Column 2</div>
        <div class="item3">Column 3</div>
    </div>
    
</body>
</html>    
Output :
Column 1
Column 2
Column 3
Dimensions of Flex Item
<!DOCTYPE html>
<head>
<title>Dimensions of Flex Item</title>
 
<style type="text/css">
 
.flex-container_2 { 
width: 80%; 
min-height:200px;  
margin:0 auto; 
font-size:32px; 
display:-webkit-flex; 
display:flex;  
border:1px solid #666; 
}
.flex-container_2 div { padding: 10px;}
.item1 { background: #e84d51; -webkit-flex: 1;   flex: 1;}
.item2 { background: #7ed636; -webkit-flex: 2; flex: 2; }
.item3 { background: #2f97ff; -webkit-flex: 1; flex: 1; }
 
</style>
</head>
<body>
 
     <div class="flex-container_2">
        <div class="item1">Column 1</div>
        <div class="item2">Column 2</div>
        <div class="item3">Column 3</div>
    </div>
    
</body>
</html>   
Output :
Column 1
Column 2
Column 3
Dimensions of Flex Item
<!DOCTYPE html>
<head>
<title>Flex Items Alignment along Cross Axis</title>
 
<style type="text/css"> 
 
.flex_container_3 { 
width: 300px;  
min-height: 200px;  
margin: 0 auto; 
font-size: 32px; 
border:1px solid #0099da;  
display: -webkit-flex;  
-webkit-align-items: center; 
display: flex;  
align-items: center;
}
.flex_container_3 div{padding: 10px;}
 
.column_1 { width: 50px; height: 70px; background: #F60;}
.column_2 { width: 80px; height: 100px; background: #0099da;}
.column_3 {  width: 110px;  height: 90px; background: #606;}
 
</style>
</head>
<body>
 
    <div class="flex_container_3">
        <div class="column_1">1</div>
        <div class="column_2">2</div>
        <div class="column_3">3</div>
    </div>
 
</body>
</html> 
Output :
1
2
3
The Perfect Flex Box Center Alignment
<!DOCTYPE html>
<html lang="en">
<head>
<title>The Perfect Flex Box Center Alignment.</title>

<style type="text/css">

.flex-container-4 { 
width: 300px; 
min-height: 150px; 
margin: 0 auto; 
font-size: 22px; 
border: 1px solid #666; 
display: -webkit-flex; 
display: flex; }

.flex_center_item { 
width: 200px; 
padding:20px; 
margin:auto; 
text-align:center; 
background:#9F0; 
}

</style>

</head>
<body>

    <div class="flex-container-4">
        <div class="flex_center_item">The Perfect Flex Box Center Alignment</div>
    </div>

</body>
</html>  
Output :
The Perfect Flex Box Center Alignment

We see you’re using an ad blocker.

Our website is made possible by displaying ads to our visitors.

Please help us continue to provide you with free. So please disabling your ad blocker.