CSS3 Flexbox: Flex

The flex property specifies the length of the flex item, relative to the rest of the flex items inside the same container. In the following example, the first flex item will consume 2/4 of the free space, and the other two flex items will consume 1/4 of the free space each:

HTML file: Displayed by browser:
<style>
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
.flex-item {
    background-color: cornflowerblue;
    margin: 10px;
}
.item1 {
    -webkit-flex: 2;
    flex: 2;
}
.item2 {
    -webkit-flex: 1;
    flex: 1;
}
.item3 {
    -webkit-flex: 1;
    flex: 1;
}
</style>
<body>
<div class="flex-container">
 <div class="flex-item item1">flex item 1</div>
 <div class="flex-item item2">flex item 2</div>
 <div class="flex-item item3">flex item 3</div>
</div>
</body>
flex item 1
flex item 2
flex item 3

Back button Table of Contents Next button