CSS flexbox positioning

CSS-flexbox-positioning.markdown

CSS flexbox positioning

Positioning HTML elements with CSS flex property.

A Pen by Torben Colding on CodePen.

License.

index.html

<h1>Positioning HTML elements with CSS flexbox</h1>
<div class="wrapper">
    <div class="container top-left">
        <div class="box"></div>
    </div>
    <div class="container top-center">
        <div class="box"></div>
    </div>
    <div class="container top-right">
        <div class="box"></div>
    </div>

    <div class="container center-left">
        <div class="box"></div>
    </div>
    <div class="container center-center">
        <div class="box"></div>
    </div>
    <div class="container center-right">
        <div class="box"></div>
    </div>

    <div class="container bottom-left">
        <div class="box"></div>
    </div>
    <div class="container bottom-center">
        <div class="box"></div>
    </div>
    <div class="container  bottom-right">
        <div class="box"></div>
    </div>
</div>

style.css

/*--- Temp styling ---*/
.wrapper{
  display: flex; 
  flex-wrap: wrap; 
  max-width: 570px;
}
.container{
  background: #999;
  width: 180px;
  height: 180px;
  margin: 5px;
}
.box{
  width: 60px;
  height: 60px;
  background: orange;
}

/*--- Positioning with flexbox---*/
.container{display: flex;}

.top-left      {align-items: flex-start; justify-content: flex-start; }
.top-center    {align-items: flex-start; justify-content: center;}
.top-right     {align-items: flex-start; justify-content: flex-end;}

.center-left   {align-items: center; justify-content: flex-start;   }
.center-center {align-items: center; justify-content: center;}
.center-right  {align-items: center; justify-content: flex-end;}

.bottom-left   {align-items: flex-end; justify-content: flex-start;}
.bottom-center {align-items: flex-end; justify-content: center;}
.bottom-right  {align-items: flex-end; justify-content: flex-end;}