The Ultimate Flexbox Cheat Sheet

Developer
Ludvig Lindblom
Size
7,954 Kb
Views
72,864
  1. The Ultimate Flexbox Cheat Sheet Previews
  2. The Ultimate Flexbox Cheat Sheet HTML Codes
  3. The Ultimate Flexbox Cheat Sheet CSS Codes
  4. The Ultimate Flexbox Cheat Sheet JS Codes

How do I make an the ultimate flexbox cheat sheet?

What is a the ultimate flexbox cheat sheet? How do you make a the ultimate flexbox cheat sheet? This script and codes were developed by Ludvig Lindblom on 25 July 2022, Monday.

The Ultimate Flexbox Cheat Sheet Previews
IQ Test

The Ultimate Flexbox Cheat Sheet - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>The Ultimate Flexbox Cheat Sheet</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<meta name='viewport' content='width=device-width'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ /* RESET */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}
/* PRETTIFY CHEAT SHEAT */
pre .str,code .str{color:#65B042;}pre .kwd,code .kwd{color:#E28964;}pre .com,code .com{color:#AEAEAE;font-style:italic;}pre .typ,code .typ{color:#89bdff;}pre .lit,code .lit{color:#3387CC;}pre .pun,code .pun{color:#fff;}pre .pln,code .pln{color:#fff;}pre .tag,code .tag{color:#89bdff;}pre .atn,code .atn{color:#bdb76b;}pre .atv,code .atv{color:#65B042;}pre .dec,code .dec{color:#3387CC;}pre.prettyprint,code.prettyprint{background-color:#000;-moz-border-radius:8px;-webkit-border-radius:8px;-o-border-radius:8px;-ms-border-radius:8px;-khtml-border-radius:8px;border-radius:8px;font-size:1rem;}pre.prettyprint{width:60%;margin:1em auto;padding:1em;white-space:pre-wrap;font-family:Consolas,monaco,monospace;-moz-box-sizing:border-box;box-sizing:border-box;}ol.linenums{margin-top:0;margin-bottom:0;color:#AEAEAE;}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{}@media print {pre .str,code .str{color:#060;}pre .kwd,code .kwd{color:#006;font-weight:bold;}pre .com,code .com{color:#600;font-style:italic;}pre .typ,code .typ{color:#404;font-weight:bold;}pre .lit,code .lit{color:#044;}pre .pun,code .pun{color:#440;}pre .pln,code .pln{color:#000;}pre .tag,code .tag{color:#006;font-weight:bold;}pre .atn,code .atn{color:#404;}pre .atv,code .atv{color:#060;}}
/* CHEAT SHEET */
body{font-family:'Open Sans',verdana,sans-serif;font-weight:400;color:#222222;padding:0 1em;background-image:url(pw_pattern.png);}h1,h2,h3{font-family:'Open Sans',verdana,sans-serif;font-weight:400;font-weight:200;}h1{font-size:2.2308rem;text-align:center;margin:4rem 0;text-transform:uppercase;color:#222222;}.ultimate{font-weight:400;font-size:4.8462rem;color:#e46119;text-shadow:2px 2px 2px #222222;}h2,h3,p,.flexcontainer,ul.resources,.sketching,ul.toc{margin:2rem auto;max-width:750px;}h2,h3{font-family:'Open Sans';font-weight:400;font-style:italic;font-size:2.6154rem;}p{line-height:1.4em;}ul.resources,ul.toc{list-style-type:circle;}ul.resources>li,ul.toc>li{margin:1em 0;}.flexcontainer{display:-webkit-flex;display:flex;-webkit-flex-direction:row;flex-direction:row;min-height:300px;max-height:450px;background-color:#dce7f2;border:1px solid #2a4f73;}.flexcontainer>div{height:100px;width:100px;background-color:#e46119;border:1px solid #626262;margin:3px;}.flexcontainer.column{-webkit-flex-direction:column;flex-direction:column;}.flexcontainer.column.top{-webkit-align-items:flex-start;align-items:flex-start;max-height:500px;height:500px;}.flexcontainer.row.top{-webkit-align-items:flex-start;align-items:flex-start;}.flexcontainer.row.left{-webkit-justify-content:flex-start;justify-content:flex-start;}.flexcontainer.column.left{-webkit-align-items:flex-start;align-items:flex-start;}.flexcontainer.row.right{-webkit-justify-content:flex-end;justify-content:flex-end;}.flexcontainer.column.right{-webkit-align-items:flex-end;align-items:flex-end;}.flexcontainer.row.center,.flexcontainer.column.center{-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;}.flexcontainer.growshrink{-webkit-align-items:center;align-items:center;}.flexcontainer.growshrink .bigitem{-webkit-flex:2 0 0;flex:2 0 0;}.flexcontainer.growshrink .smallitem{-webkit-flex:1 0 0;flex:1 0 0;}.flexcontainer.wrap.row{-webkit-flex-flow:row wrap;flex-flow:row wrap;-webkit-align-content:flex-end;align-content:flex-end;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;}.flexcontainer.wrap.column{-webkit-flex-flow:column wrap;flex-flow:column wrap;-webkit-align-content:stretch;align-content:stretch;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;}.flexcontainer.wrap.column.nospace{-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;-webkit-align-content:center;align-content:center;}.flexcontainer.column.pin{-webkit-align-items:center;align-items:center;}.flexcontainer.column.pin .left{-webkit-align-self:flex-start;align-self:flex-start;}.flexcontainer.column.pin .right{margin-left:auto;}.cta{font-weight:600;}.keyword{color:#e46119;}.sketching{padding:0 5%;}.sketching h3{font-size:3rem;margin:2rem auto;text-align:center;}#cta1{max-width:600px;margin:0 auto;}.sketching p{width:100%;}.sketching p:first-of-type{margin-top:4rem;}.sketching figure{-moz-box-sizing:border-box;box-sizing:border-box;margin:0 auto;width:100%;padding:0;}.sketching figure a{opacity:1;position:static;}.sketching figure a:hover{opacity:1;}.sketching figure img,.sketching .figure img{width:100%;margin:0;}.sketching .figure img{-webkit-filter:drop-shadow(5px 5px 5px #222222);-moz-filter:drop-shadow(5px 5px 5px #222222);filter:drop-shadow(5px 5px 5px #222222);}.sketching form{foat:left;clear:left;}.sketching button{font-family:'Open Sans';font-weight:400;background-color:#e16048;color:#eeeeee;padding:24px;padding:1rem;display:block;margin:1rem auto;font-size:2rem;text-transform:uppercase;}.sketching input,.sketching label{display:block;margin:1rem auto;}.sketching label{margin:0;font-weight:600;width:16rem;}.sketching input{width:14rem;padding:1rem;font-size:1rem;}.sketching div.opt-in{margin:0 auto;}.sketching .opt-in>label,.sketching .opt-in>input{display:inline;width:initial;margin:0;}.sketching .opt-in>label{line-height:1.4em;}#ck_success_msg p{color:#e16048;font-size:2rem;line-height:1.1em;text-align:center;}@media screen and (min-width: 550px) {.sketching h3{font-size:4rem;width:100%;margin:3rem 0;}.ck_control_group *{-moz-box-sizing:border-box;box-sizing:border-box;}.ck_control_group{float:left;-moz-box-sizing:border-box;box-sizing:border-box;}.ck_control_group input{width:100%;}.ck_control_group:first-of-type{width:40%;}.ck_control_group:nth-of-type(2){padding-left:2rem;width:60%;}.sketching .figure{float:left;-moz-box-sizing:border-box;box-sizing:border-box;width:40%;margin:0;padding:0 2rem 2rem 0;}.sketching .figure::after{content:"";display:table;clear:both;}}#ck_success_msg{clear:both;}#sharing{position:absolute;top:0;right:0;margin:2em;} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h1>The <span class="ultimate">Ultimate</span> Flexbox Cheat Sheet</h1>
<p class="summary">
Flexbox is a brand, spankin' new CSS layout module with <a href="http://caniuse.com/flexbox">suprisingly good browser support</a>! Say goodbye to float frustration and hello to a brave new world of easy vertical centering, re-ordering elements and dynamically growing and shrinking layouts.
</p>
<p>
<span class="cta">Looking for a quick introduction to the basic concepts?</span> <a href="http://www.sketchingwithcss.com/flexbox/">Watch this video tutorial</a> (requires a desktop/laptop and a modern browser).
</p>
<h3>Table of Contents</h3>
<ul class="toc">
<li><a href="#create">Create a flex container</a></li>
<li><a href="#row">Put flex items in a row</a></li>
<li><a href="#column">Put flex items into a column</a></li>
<li><a href="#top">Move flex items to the top</a></li>
<li><a href="#left">Move flex items to the left</a></li>
<li><a href="#right">Move flex items to the right</a></li>
<li><a href="#center">Center everything</a></li>
<li><a href="#grow">Grow a flex item X times as big as other flex items</a></li>
<li><a href="#wraprow">Wrap flex items into multiple rows</a></li>
<li><a href="#wrapcolumn">Wrap flex items into multiple columns</a></li>
<li><a href="#nospace">Remove the space from wrapped rows or columns</a></li>
<li><a href="#pin">Pin an element to one side of the flex container</a></li>
<li><a href="#other">Other flexbox resources</a></li>
</ul>
<p class="cta">Note: If any of the examples are not working you will need to upgrade your browser.</p>
<h3><a name="create">Create a flex container</a></h3>
<p>
The first step in any flexbox layout is to create a flex container. To do that, set the <span class="keyword">display</span> property to <span class="keyword">flex</span>. In Safari, you will still have to use the <span class="keyword">-webkit</span> prefix.
</p>
<pre class="prettyprint">
.flexcontainer { display: -webkit-flex; display: flex;
}</pre>
<h3><a name="row">Put flex items into a row</a></h3>
<p>
Flex items are the children of a flex container. They are positioned along a main axis and a cross axis. The main axis is horizontal by default, so the items flow into a row. You can flip the main axis by setting <span class="keyword">flex-direction</span> to <span class="keyword">column</span>, it's set to <span class="keyword">row</span> by default.
</p>
<pre class="prettyprint">
/*On the flex container*/
.flexcontainer { display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row;
}</pre>
<div class="flexcontainer">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<h3><a name="column">Put flex items into a column</a></h3>
<pre class="prettyprint">
.flexcontainer { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column;
}</pre>
<div class="flexcontainer column">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<h3><a name="top">Move flex items to the top</a></h3>
<p>
How you move flex items to the top depends on the orientation of the main axis. If it's vertical, you set <span class="keyword">align-items</span>. If it's horizontal, you set <span class="keyword">justify-content</span>.
</p>
<pre class="prettyprint">
.flexcontainer { -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: flex-start; justify-content: flex-start;</pre>
<div class="flexcontainer column top">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<pre class="prettyprint">
.flexcontainer { display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: flex-start; align-items: flex-start;
}</pre>
<div class="flexcontainer row top">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<h3><a name="left">Move flex items to the left</a></h3>
<p>
Moving items to the left or right also depends on the orientation of the main axis. If <span class="keyword">flex-direction</span> is set to <span class="keyword">row</span>, then you set <span class="keyword">justify-content</span>, otherwise if it's set to <span class="keyword">column</span> you set <span class="keyword">align-items</span>
</p>
<pre class="prettyprint">
.flexcontainer { display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: flex-start; justify-content: flex-start;
}</pre>
<div class="flexcontainer row left">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<pre class="prettyprint">
.flexcontainer { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: flex-start; align-items: flex-start;
}</pre>
<div class="flexcontainer column left">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<h3><a name="right">Move flex items to the right</a></h3>
<pre class="prettyprint"> .flexcontainer { display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: flex-end; justify-content: flex-end;
}</pre>
<div class="flexcontainer row right">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<pre class="prettyprint">
.flexcontainer { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: flex-end; align-items: flex-end;
}</pre>
<div class="flexcontainer column right">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<h3><a name="center">Center everything</a></h3>
<p>
Vertical and horizontal centering within a flexcontainer is trivial. Just set <span class="keyword">justify-content</span> and/or <span class="keyword">align-items</span> to center. Again, it depends on the orientation of the main axis, so whether <span class="keyword">flex-direction</span> is set to <span class="keyword">row</span> or <span class="keyword">column</span>.
</p>
<pre class="prettyprint">
.flexcontainer { display: -webkit-flex; display: flex; -webkit-flex-direction: row /* works with row or column */ flex-direction: row; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center;
}</pre>
<div class="flexcontainer row center">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="flexcontainer column center">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<h3><a name="grow">Grow a flex item X times as big as other flex items</a></h3>
<p>
You can define how an individual flex item grows and shrinks relative to other flex items in the container. To do this set the <span class="keyword">flex</span> property on each flex item you want to grow or shrink.
</p>
<pre class="prettyprint">
.bigitem { /* This will be twice as big as the small item. */ -webkit-flex: 2 0 0; flex: 2 0 0;
}
.smallitem { -webkit-flex: 1 0 0; flex: 1 0 0;
}</pre>
<div class="flexcontainer growshrink">
<div class="bigitem"></div>
<div class="smallitem"></div>
</div>
<h3><a name="wraprow">Wrap flex items into multiple rows</a></h3>
<p>
At the moment browser support for wrapping flex items is limited to webkit browsers and IE11. Firefox does not support wrapping yet. (Bad Firefox, BAD!)
</p>
<pre class="prettyprint">
/* On the flex container */
.flexcontainer { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; /* You can set flex-wrap and flex-direction individually */ -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap; /* Or do it all in one line with flex flow */ -webkit-flex-flow: row wrap; flex-flow: row wrap; /* tweak the where items line up on the row */ /* valid values are: flex-start, flex-end, space-between, space-around, stretch */ -webkit-align-content: flex-end; align-content: flex-end;
}</pre>
<div class="flexcontainer wrap row">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<h3><a name="wrapcolumn">Wrap flex items into multiple columns</a></h3>
<pre class="prettyprint"> display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; -webkit-flex-flow: column wrap; flex-flow: column wrap; -webkit-align-content: stretch; align-content: stretch;
}</pre>
<div class="flexcontainer wrap column">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<h3><a name="nospace">Remove the space from wrapped rows or columns</a></h3>
<p>
The <span class="keyword">align-content</span> property gives you options for distributing the space around wrapped rows or columns. The options are <span class="keyword">flex-start, flex-end, space-between, space-around</span> and <span class="keyword">stretch</span>. To simply remove the space around wrapped columns, set <span class="keyword">align-content</span> to <span class="keyword">center</span>.
</p>
<pre class="prettyprint">
.flexcontainer { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; -webkit-flex-flow: column wrap; flex-flow: column wrap; -webkit-align-content: center; align-content: center;
}</pre>
<div class="flexcontainer wrap column nospace">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<h3><a name="pin">Pin an element to one side of the flex container</a></h3>
<p>
You can control the <span class="keyword">align-items</span> value for individual elements with <span class="keyword">align-self</span>. You can also use <span class="keyword">margins</span> to move individual elements up or down or left of right. e.g. on a column layout you can move an individual flex item all the way to the left of the container by setting <span class="keyword">margin-right: auto</span>.
</p>
<pre class="prettyprint">
/* On the flex item to pin */
.left { -webkit-align-self: flex-start; align-self: flex-start;
}
.right { margin-left: auto;
}</pre>
<div class="flexcontainer pin column">
<div></div>
<div class="left"></div>
<div class="right"></div>
<div></div>
</div>
<p>Source: <a href="http://www.sketchingwithcss.com/samplechapter/cheatsheet.html">http://www.sketchingwithcss.com/samplechapter/cheatsheet.html</a></p> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.js'></script> <script src="js/index.js"></script>
</body>
</html>

The Ultimate Flexbox Cheat Sheet - Script Codes CSS Codes

/* RESET */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}
/* PRETTIFY CHEAT SHEAT */
pre .str,code .str{color:#65B042;}pre .kwd,code .kwd{color:#E28964;}pre .com,code .com{color:#AEAEAE;font-style:italic;}pre .typ,code .typ{color:#89bdff;}pre .lit,code .lit{color:#3387CC;}pre .pun,code .pun{color:#fff;}pre .pln,code .pln{color:#fff;}pre .tag,code .tag{color:#89bdff;}pre .atn,code .atn{color:#bdb76b;}pre .atv,code .atv{color:#65B042;}pre .dec,code .dec{color:#3387CC;}pre.prettyprint,code.prettyprint{background-color:#000;-moz-border-radius:8px;-webkit-border-radius:8px;-o-border-radius:8px;-ms-border-radius:8px;-khtml-border-radius:8px;border-radius:8px;font-size:1rem;}pre.prettyprint{width:60%;margin:1em auto;padding:1em;white-space:pre-wrap;font-family:Consolas,monaco,monospace;-moz-box-sizing:border-box;box-sizing:border-box;}ol.linenums{margin-top:0;margin-bottom:0;color:#AEAEAE;}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{}@media print {pre .str,code .str{color:#060;}pre .kwd,code .kwd{color:#006;font-weight:bold;}pre .com,code .com{color:#600;font-style:italic;}pre .typ,code .typ{color:#404;font-weight:bold;}pre .lit,code .lit{color:#044;}pre .pun,code .pun{color:#440;}pre .pln,code .pln{color:#000;}pre .tag,code .tag{color:#006;font-weight:bold;}pre .atn,code .atn{color:#404;}pre .atv,code .atv{color:#060;}}
/* CHEAT SHEET */
body{font-family:'Open Sans',verdana,sans-serif;font-weight:400;color:#222222;padding:0 1em;background-image:url(pw_pattern.png);}h1,h2,h3{font-family:'Open Sans',verdana,sans-serif;font-weight:400;font-weight:200;}h1{font-size:2.2308rem;text-align:center;margin:4rem 0;text-transform:uppercase;color:#222222;}.ultimate{font-weight:400;font-size:4.8462rem;color:#e46119;text-shadow:2px 2px 2px #222222;}h2,h3,p,.flexcontainer,ul.resources,.sketching,ul.toc{margin:2rem auto;max-width:750px;}h2,h3{font-family:'Open Sans';font-weight:400;font-style:italic;font-size:2.6154rem;}p{line-height:1.4em;}ul.resources,ul.toc{list-style-type:circle;}ul.resources>li,ul.toc>li{margin:1em 0;}.flexcontainer{display:-webkit-flex;display:flex;-webkit-flex-direction:row;flex-direction:row;min-height:300px;max-height:450px;background-color:#dce7f2;border:1px solid #2a4f73;}.flexcontainer>div{height:100px;width:100px;background-color:#e46119;border:1px solid #626262;margin:3px;}.flexcontainer.column{-webkit-flex-direction:column;flex-direction:column;}.flexcontainer.column.top{-webkit-align-items:flex-start;align-items:flex-start;max-height:500px;height:500px;}.flexcontainer.row.top{-webkit-align-items:flex-start;align-items:flex-start;}.flexcontainer.row.left{-webkit-justify-content:flex-start;justify-content:flex-start;}.flexcontainer.column.left{-webkit-align-items:flex-start;align-items:flex-start;}.flexcontainer.row.right{-webkit-justify-content:flex-end;justify-content:flex-end;}.flexcontainer.column.right{-webkit-align-items:flex-end;align-items:flex-end;}.flexcontainer.row.center,.flexcontainer.column.center{-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;}.flexcontainer.growshrink{-webkit-align-items:center;align-items:center;}.flexcontainer.growshrink .bigitem{-webkit-flex:2 0 0;flex:2 0 0;}.flexcontainer.growshrink .smallitem{-webkit-flex:1 0 0;flex:1 0 0;}.flexcontainer.wrap.row{-webkit-flex-flow:row wrap;flex-flow:row wrap;-webkit-align-content:flex-end;align-content:flex-end;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;}.flexcontainer.wrap.column{-webkit-flex-flow:column wrap;flex-flow:column wrap;-webkit-align-content:stretch;align-content:stretch;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;}.flexcontainer.wrap.column.nospace{-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;-webkit-align-content:center;align-content:center;}.flexcontainer.column.pin{-webkit-align-items:center;align-items:center;}.flexcontainer.column.pin .left{-webkit-align-self:flex-start;align-self:flex-start;}.flexcontainer.column.pin .right{margin-left:auto;}.cta{font-weight:600;}.keyword{color:#e46119;}.sketching{padding:0 5%;}.sketching h3{font-size:3rem;margin:2rem auto;text-align:center;}#cta1{max-width:600px;margin:0 auto;}.sketching p{width:100%;}.sketching p:first-of-type{margin-top:4rem;}.sketching figure{-moz-box-sizing:border-box;box-sizing:border-box;margin:0 auto;width:100%;padding:0;}.sketching figure a{opacity:1;position:static;}.sketching figure a:hover{opacity:1;}.sketching figure img,.sketching .figure img{width:100%;margin:0;}.sketching .figure img{-webkit-filter:drop-shadow(5px 5px 5px #222222);-moz-filter:drop-shadow(5px 5px 5px #222222);filter:drop-shadow(5px 5px 5px #222222);}.sketching form{foat:left;clear:left;}.sketching button{font-family:'Open Sans';font-weight:400;background-color:#e16048;color:#eeeeee;padding:24px;padding:1rem;display:block;margin:1rem auto;font-size:2rem;text-transform:uppercase;}.sketching input,.sketching label{display:block;margin:1rem auto;}.sketching label{margin:0;font-weight:600;width:16rem;}.sketching input{width:14rem;padding:1rem;font-size:1rem;}.sketching div.opt-in{margin:0 auto;}.sketching .opt-in>label,.sketching .opt-in>input{display:inline;width:initial;margin:0;}.sketching .opt-in>label{line-height:1.4em;}#ck_success_msg p{color:#e16048;font-size:2rem;line-height:1.1em;text-align:center;}@media screen and (min-width: 550px) {.sketching h3{font-size:4rem;width:100%;margin:3rem 0;}.ck_control_group *{-moz-box-sizing:border-box;box-sizing:border-box;}.ck_control_group{float:left;-moz-box-sizing:border-box;box-sizing:border-box;}.ck_control_group input{width:100%;}.ck_control_group:first-of-type{width:40%;}.ck_control_group:nth-of-type(2){padding-left:2rem;width:60%;}.sketching .figure{float:left;-moz-box-sizing:border-box;box-sizing:border-box;width:40%;margin:0;padding:0 2rem 2rem 0;}.sketching .figure::after{content:"";display:table;clear:both;}}#ck_success_msg{clear:both;}#sharing{position:absolute;top:0;right:0;margin:2em;}

The Ultimate Flexbox Cheat Sheet - Script Codes JS Codes

window.onload = prettyPrint;
The Ultimate Flexbox Cheat Sheet - Script Codes
The Ultimate Flexbox Cheat Sheet - Script Codes
Home Page Home
Developer Ludvig Lindblom
Username ludviglindblom
Uploaded July 25, 2022
Rating 3.5
Size 7,954 Kb
Views 72,864
Do you need developer help for The Ultimate Flexbox Cheat Sheet?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ludvig Lindblom (ludviglindblom) Script Codes
Name
I Am Left logo as a scalable canvas
Christmas Tree
Rainy days
Christmas ornaments
Disable JavaScript execution from console
JQuery countdown plugin
Canvas animation
Canvas pie chart with CSS bar chart fallback
CSS mask-image
Circle star
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!