FlexBox

by bakhshi

HTML

<div class="container">
    <div class="content">1</div>
    <div class="content">2</div>
    <div class="content">3</div>
    <div class="content">4</div>
    <div class="content">5</div>
    <div class="content">6</div>
    <div class="content">7</div>
    <div class="content">8</div>
    <div class="content">9</div>
    <div class="content _10">10</div>
</div>
<div class="container">
    <div title='one approach to center 3 div in side another div' class="content left">left</div>
    <div class="content center">center</div>
    <div class="content right">right</div>
</div>
<div class="container">
    <div class="content center wide">
        <div title='another approach to center 3 div in side another div'  class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
    </div>
</div>

CSS

.container{
    display:flex;
    width:500px;
    height:450px;
    background-color:blue;
    color:white;
    float:left;
    border:solid 1px yellow;
    
    flex-direction:row;
    /*allow content to wrap, otherwise it tries to place them in a single row/column and compresses them*/
    flex-wrap:wrap;
    /*center content elements along main axis*/
    justify-content:center;
    /*center content nodes along cross axis*/
    align-items:center;
}
.content{
    background-color:rgba(128,128,128,0.5);
    width:100px;
    height:100px;
    border:solid 1px white;
    text-align:center;
    color:white;
    /*allow every content node to grow and fill the available space*/
    flex-grow:1;
}

.center, .left, .right{
    margin:auto 0;
    flex-grow:0;
}
.left{
    margin-right:0;
}
.right{
    margin-left:0;
}

.wide{
    margin:auto;
    width:400px;
    display: flex;
}

._10{
    flex-basis:2;
}