CSS3 Flex Box, TutorialsPoint, CSS3 Flex Box Tutorial

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 :

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

CSS3 Tutorial