flexbox layout template

HTML

<section class="flexbox-container">
		<div class="flexbox-container__inner">
			<h2 class="flexbox-container__title">Parent Flex-container</h2>
				<div class="code-container">
<pre class="code-container__element"><span class="code-container__element-param">display:</span> <a href="#" class="code-container__element-value" data-clipboard-text="display: flex;">flex</a>
         <a href="#" class="code-container__element-value" data-clipboard-text="display: inline-flex;">inline-flex</a>
</pre>

<pre class="code-container__element" id="flex-direction"><span class="code-container__element-param">flex-direction:</span> <a href="#" class="code-container__element-value" data-clipboard-text="flex-direction: row;">row</a>
                <a href="#" class="code-container__element-value" data-clipboard-text="flex-direction: row-reverse;">row-reverse</a>
                <a href="#" class="code-container__element-value" data-clipboard-text="flex-direction: column;">column</a>
                <a href="#" class="code-container__element-value" data-clipboard-text="flex-direction: column-reverse;">column-reverse</a>
</pre>

<pre class="code-container__element" id="flex-wrap"><span class="code-container__element-param">flex-wrap:</span> <a href="#" class="code-container__element-value" data-clipboard-text="flex-wrap: nowrap;">nowrap</a>
           <a href="#" class="code-container__element-value" data-clipboard-text="flex-wrap: wrap;">wrap</a>
           <a href="#" class="code-container__element-value" data-clipboard-text="flex-wrap: wrap-reverse;">wrap-reverse</a>
</pre>

<pre class="code-container__element"><span class="code-container__element-param">justify-content:</span> <a href="#" class="code-container__element-value" data-clipboard-text="justify-content: flex-start;">flex-start</a>
                 <a href="#" class="code-container__element-value" data-clipboard-text="justify-content: flex-end;">flex-end</a>
                 <a href="#" class="code-container__element-value" data-clipboard-text="justify-content: center;">center</a>
                 <a href="#" class="code-container__element-value" data-clipboard-text="justify-content: space-between;">space-between</a>
                 <a href="#" class="code-container__element-value" data-clipboard-text="justify-content: space-around;">space-around</a>
</pre>

<pre class="code-container__element"><span class="code-container__element-param">align-items:</span> <a href="#" class="code-container__element-value" data-clipboard-text="align-items: flex-start;">flex-start</a>
             <a href="#" class="code-container__element-value" data-clipboard-text="align-items: flex-end;">flex-end</a>
             <a href="#" class="code-container__element-value" data-clipboard-text="align-items: center;">center</a>
             <a href="#" class="code-container__element-value" data-clipboard-text="align-items: baseline;">baseline</a>
             <a href="#" class="code-container__element-value" data-clipboard-text="align-items: stretch;">stretch</a>
</pre>

<pre class="code-container__element"><span class="code-container__element-param">align-content:</span> <a href="#" class="code-container__element-value" data-clipboard-text="align-content: flex-start;">flex-start</a>
               <a href="#" class="code-container__element-value" data-clipboard-text="align-content: flex-end;">flex-end</a>
               <a href="#" class="code-container__element-value" data-clipboard-text="align-content: center;">center</a>
               <a href="#" class="code-container__element-value" data-clipboard-text="align-content: space-between;">space-between</a>
               <a href="#" class="code-container__element-value" data-clipboard-text="align-content: space-around;">space-around</a>
               <a href="#" class="code-container__element-value" data-clipboard-text="align-content: stretch;">stretch</a>
</pre>

<pre class="code-container__element"><span class="code-container__element-param">flex-flow:</span> <a href="#flex-direction" class="code-container__element-value" data-clipboard-text="flex-flow: row nowrap;">&lt;flex-direction&gt;</a> <a href="#flex-wrap" class="code-container__element-value" data-clipboard-text="flex-flow: row nowrap;">&lt;flex-wrap&gt;</a>
</pre>
			</div>
		</div>
	</section>

<div class="flexbox-container__inner">
			<h2 class="flexbox-container__title">Children Flex-container</h2>
			<div class="code-container">
<pre class="code-container__element"><span class="code-container__element-param">order:</span> <input type="number" value="0" min="0" id="flex-order" class="code-container__element-value" data-clipboard-text="flex-order: 0;">
</pre>

<pre class="code-container__element" id="flex-grow"><span class="code-container__element-param">flex-grow:</span> <input type="number" value="0" min="0" id="flex-grow" class="code-container__element-value" data-clipboard-text="flex-grow: 0;">
</pre>

<pre class="code-container__element" id="flex-shrink"><span class="code-container__element-param">flex-shrink:</span> <input type="number" value="1" min="0" id="flex-shrink" class="code-container__element-value" data-clipboard-text="flex-shrink: 1;">
</pre>

<pre class="code-container__element" id="flex-basis"><span class="code-container__element-param">flex-basis:</span> <a href="#" class="code-container__element-value" data-clipboard-text="flex-basis: auto;">auto</a>
            <input type="number" value="0" min="0" id="flex-basis" class="code-container__element-value" data-clipboard-text="flex-basis: 0;">
</pre>

<pre class="code-container__element"><span class="code-container__element-param">flex:</span> <a href="#flex-grow" class="code-container__element-value" data-clipboard-text="flex: 0 1 auto;">&lt;flex-grow&gt;</a> <a href="#flex-shrink" class="code-container__element-value" data-clipboard-text="flex: 0 1 auto;">&lt;flex-shrink&gt;</a> <a href="#flex-basis" class="code-container__element-value" data-clipboard-text="flex: 0 1 auto;">&lt;flex-basis&gt;</a>
</pre>

<pre class="code-container__element"><span class="code-container__element-param">align-self:</span> <a href="#" class="code-container__element-value" data-clipboard-text="align-self: auto;">auto</a>
            <a href="#" class="code-container__element-value" data-clipboard-text="align-self: flex-start;">flex-start</a>
            <a href="#" class="code-container__element-value" data-clipboard-text="align-self: flex-end;">flex-end</a>
            <a href="#" class="code-container__element-value" data-clipboard-text="align-self: center;">center</a>
            <a href="#" class="code-container__element-value" data-clipboard-text="align-self: baseline;">baseline</a>
            <a href="#" class="code-container__element-value" data-clipboard-text="align-self: stretch;">stretch</a>
</pre>
			</div>
		</div>

CSS

.page-header .page-header__title{margin-bottom:10px}.flexbox-container{padding:15px}.flexbox-container:hover{background-color:#f7f7f7}.flexbox-container__inner{max-width:1200px;width:100%;margin:0 auto}.flexbox-container h2{margin-top:0}.code-container{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.code-container__element{margin-right:30px;background-color:#272822;padding:15px;color:#fff;border-radius:3px;-webkit-box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);-webkit-transition:-webkit-box-shadow .25s;transition:-webkit-box-shadow .25s;transition:box-shadow .25s;transition:box-shadow .25s,-webkit-box-shadow .25s}.code-container__element:hover{-webkit-box-shadow:0 8px 17px 0 rgba(0,0,0,.5),0 6px 20px 0 rgba(0,0,0,.19);box-shadow:0 8px 17px 0 rgba(0,0,0,.5),0 6px 20px 0 rgba(0,0,0,.19)}.code-container__element--pulse{-webkit-animation-name:codepulse;animation-name:codepulse;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-iteration-count:2;animation-iteration-count:2}.code-container__element-param{color:#79abff}.code-container__element-value{color:#fff;width:35px;background-color:transparent;border:none;outline:0}.code-container__element-value:hover{color:#ccc;text-decoration:none}.copy-notify{position:fixed;top:15px;right:15px;height:330px;overflow:hidden}.copy-notify__block{border-radius:3px;border:3px solid;padding:5px;opacity:0;margin-bottom:10px;padding:6px 10px;width:auto}.copy-notify__block--success{background-color:#90c695;border-color:#519f59;color:#2f5b33;-webkit-animation-name:notifyshow;animation-name:notifyshow;-webkit-animation-duration:3s;animation-duration:3s}@media (min-width:1200px){.code-container__element{min-width:260px}}@-webkit-keyframes codepulse{0%,100%{background-color:#272822}50%{background-color:#4f5145}}@keyframes codepulse{0%,100%{background-color:#272822}50%{background-color:#4f5145}}@-webkit-keyframes notifyshow{0%,100%{opacity:0}10%,90%{opacity:1}}@keyframes notifyshow{0%,100%{opacity:0}10%,90%{opacity:1}}

display: flex
         inline-flex

flex-direction: row
                row-reverse
                column
                column-reverse

flex-wrap: nowrap
           wrap
           wrap-reverse

justify-content: flex-start
                 flex-end
                 center
                 space-between
                 space-around

align-items: flex-start
             flex-end
             center
             baseline
             stretch

align-content: flex-start
               flex-end
               center
               space-between
               space-around
               stretch

flex-flow: <flex-direction> <flex-wrap>

order: 

flex-grow: 

flex-shrink: 

flex-basis: auto
            

flex: <flex-grow> <flex-shrink> <flex-basis>

align-self: auto
            flex-start
            flex-end
            center
            baseline
            stretch