html

flexbox layout template

Posted in html
367
6:20 am, August 31, 2018
 

flexbox layout template

thought i would see what a full page example layout would be like using flexbox rather than floats

Using this for flexbox reference

Note: tested working in ie11.. yay.

 

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}}

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

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

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

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

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

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

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

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

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

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

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

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

<pre class="code-containerelement"><span class="code-containerelement-param">align-self:</span> <a href="#" class="code-containerelement-value" data-clipboard-text="align-self: auto;">auto</a>
<a href="#" class="code-containerelement-value" data-clipboard-text="align-self: flex-start;">flex-start</a>
<a href="#" class="code-containerelement-value" data-clipboard-text="align-self: flex-end;">flex-end</a>
<a href="#" class="code-containerelement-value" data-clipboard-text="align-self: center;">center</a>
<a href="#" class="code-containerelement-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>

Posted in html
367
6:20 am, August 31, 2018

View Statistics
This Week
88
This Month
618
This Year
454

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Items in html
Content Editable sticky table headers 🔗How to add a Link in HTML? CSSnowflakes simple snowflakes non-JS snowflakes for your website snowflakes falling body effects HTML how to add an IMAGE! Quick HTML Tutorial HTML How to CENTRE Text Easy! - Quick HTML and CSS Tutorial font awesome spinner loader loading spinner Using the HTML tag details for easy accordions Video different sources on screen sizes video embed html responsive Boots Widget change from widget to cat head and click function pulse map dots codemirror with auto preview window using figcaption and figure for your images a google font like muli - mulish and embed code basic radio checklist - check and item and get its value in a textarea share to twitter html link only linked in share link html only, linkedin, linked-in Facebook HTML for Sharing a Link Footer Design and Redesign Regions of New Zealand - In Dropdown Form content editable p tag with spell check enabled get directions from google maps form embed Common and Uncommon Meta Tag's and Social Meta Tags Input Suggestions using a datalist Add custom symbol to ul li list and align text items using the kbd html tag twitter social sharing meta tags test image url that always changes unsplash placeholder set the amount of lines to show in a textarea field Scroll down indicator css javascript and html a page with two images Aligning Images in TinyMCE or Floating them left and right (code) test page for the custom css 12 grid used on this site easy twitter embed code Custom JS Tabs - No Jquery or Jquery UI scroll to top html css and js hide parts of a form until the 1st item is selected load a youtube video in a fancybox modal add google captcha to enable and disable a form button template for testing and live reloading html files toggle div function with chevron up down toggle Bootstrap Card Formatting HTML and CSS - Header and Footer Applied Accessibility - Tab Index Applied Accessibility - Access Keys Dropdown Box with Searchable Text meta keywords tag meta description tag favicon code meta tag foundation includes cdnjs
Related Search Terms
html GitHub 1
html page 1
html this 3
html width 3
html Flexbox Layout Template 19
html full 11
html Height 10
html flexbox 26
html what 9
html Flexbox 31
html Using Flexbox rather than Floats 1
html thou 12
html like 8
html Using 18
html flex 33
html HTML 9
html working 12
html thought 6
html cheat 11
html iframe 9
html href 13
html work 9
html sheet 12
html Sheet 16
html flexbox layout 28
html Flex 37
html Iframe 13
html Working 9
html target 18
html rim 17
html xbox 20
html Git 9
html http 4
html template 34
html using 16
html Cheat 22
html test 20
html html 26
html git 41
html height 17
html style 22
html Template 29
Other Categories in Code
alpine js apps c css factorio font awesome images linux quick modals sqlite site bugs site updates slick slider sliders testing windows apps ai animation apache api apps asp bat blocking bootstrap bootstrap templates charts cookies core css css filters css grid css tips design elements docker domains emoji fancybox fonts foundation framework gimp git html icons ideas image formatting images javascript javascript functions jquery js linux mac minecraft misc modal modals mysql nginx node php php errors php function php functions php simple html dom pi400 proxmox python react regex sections simple_html_dom simplepie php site bugs site documentation slick slick slider sql sqlite ssh sublime svg svg css templates test tools video virtual box vscode vue webdev windows windows 11 windows commands wordpress youtube
Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

You could also follow me on twitter. I have a couple of youtube channels if you want to see some video related content. RuneScape 3, Minecraft and also a coding channel here Web Dev.

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote


Windows
Latest News
## 🚀 AI Giants Hit Bullseye: Anthropic & OpenAI Achieve Product-Market Fit Anthropic and OpenAI have reached a significant milestone, finding product-market fit with their AI technologies, which means their products effectively meet the needs of their customers, driving growth and adoption. This achievement showcases the practical value of their innovations, enabling businesses and individuals to leverage AI for enhanced productivity and efficiency. With this alignment of product and market needs, these companies are poised to transform industries and shape the future of technology.