Cacher is the code snippet organizer for pro developers

<!-- Multi-column Flexbox Layouts 
     
     Flex container 

-->

<div class="main">	

<h1> Hello</h1>
<p>
</p>

<img src="">
<p>
</p>

<p>
</p>

</div>


<style>
/*  */

.main {
	-webkit-column-count:3;
	-webkit-column-gap:-1;
	-webkit-column-rule-width: 2px;
	-webkit-column-rule-style: dotted;
	-webkit-column-rule-color: #000;

    /* shorthand  */
	-webkit-column-rule: 2px dotted #000;

	/* shorthand  */
	-webkit-column: 250px 2em; /* width ( max width of column) - gap  */
}

img{
	display:block;
	margin:1.5em 0;
	max-width: 100%;
}

h1{
	-webkit-column-span: all;
}


</style>

<!-- Flexbox Layouts 
     
     Flex container 

-->

<div class="main">


<div class="col-a col">

Col-a

</div>

<div class="col-b col">

Col-b

</div>

<div class="col-c col">

Col-c

</div>



</div>


<style>
/*  */

.main {
	display: -webkit-flex;
}

.col{
	-webkit-flex:1; /* all list item same size  */
}

.col-c{
	-webkit-flex:2;
	-webkit-order:-1;
}

.col-b{
	-webkit-align-self:center; /* vertical center - flex-end (align to bottom) -strech(same height) */
}

@media screen and (max-width: 999px){
    .main {
	-webkit-flex-direction:column; /* convert to one column layout */
}

}

</style>

<!-- Flexbox Layouts 
     
     Flex container - flex line(row) - flex item

     ------------  main axis - horizontal - left to right

     | cross axis - vertical - top to bottom
     
     ----- use modernizer for older browser

<div class="flex-container">


<div class="flex-line">


<div class="flex-item-1">
</div>
<div class="flex-item-1">
</div>


</div>

</div>

-->

<ul class="nav">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>


<style>
/* Direction Value : row - row-reverse column - column-reverse 
   Justify content : space-between (same width) - space-end (right) - space-center (center)*/

.nav {
	display: -webkit-flex;
	-webkit-flex-direction: row; /* Default row  */
    -webkit-justify-content: space-between;
    -webkit-flex-wrap:wrap;  /* wrap elements  */
}
.nav li:last-child:{
	margin-left :auto; /* last item to the left  */
}
.nav li:first-child:{
	margin-right :auto; /* first item to the right  */
}

.nav li{
	-webkit-flex-grow:1; /* all list item same size  */
}
</style>