CSS3 Flexbox: Margin

Setting margin: auto; will absorb extra space. It can be used to push flex items into different positions. In the following example we set margin-right: auto; on the first flex item. This will cause all the extra space to be absorbed to the right of that element:

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;
    width: 75px;
    height: 75px;
    margin: 10px;
}

.flex-item:first-child {
    margin-right: auto;
}
</style>
<body>
<div class="flex-container">
    <div class="flex-item">flex item 1</div>
    <div class="flex-item">flex item 2</div>
    <div class="flex-item">flex item 3</div>
</div>
</body>
flex item 1
flex item 2
flex item 3

Back button Table of Contents Next button