1<!DOCTYPE html> 2<html> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <title>Calculating flex-basis Values and Margins</title> 8 <meta name="viewport" content="width=device-width"> 9 <meta name="description" content="A simple Sass function that calculates flex-basis, including flexible margins."> 10 <link rel="shortcut icon" href="http://sassbreak.com/favicon.ico"> 11<!-- <link rel="stylesheet" href="http://basehold.it/27"> --> 12 <link rel="canonical" href="http://sassbreak.com/calculate-flex-basis/"> 13 14 <!-- Custom CSS --> 15 <link rel="stylesheet" href="/css/styles.css"> 16
16<script>
vendor: 343 bytes, lines 16-21
16 17 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ 18 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 19 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 20 })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); 21 ga('create', '
21UA-54825201-1
vendor: 40 bytes, lines 21-23
21', 'auto'); 22 ga('send', 'pageview'); 23
23</script>
23 24</head> 25 26 <body> 27 <div class="wrapper"> 28 29<header class="main-header" role="banner"> 30 <nav class="navbar" role="navigation"> 31 <ul class="nav"> 32 <li class="nav__item"> 33 <a href="http://sassbreak.com">Articles</a> 34 </li> 35 <li class="nav__item"> 36 <a href="/about/">About</a> 37 </li class="nav__item"> 38 <li class="nav__item"> 39 <a href="/resources/">Resources</a> 40 </li> 41 </ul> 42 </nav> 43</header> 44<div class="grid panel--padded--centered"> 45 <div class="grid__col--12 break"> 46 <a class="site-logo" href="/" title="Sassbreak.com â Home"> 47 <b class="srt">Sass Break</b> 48 </a> 49 </div> 50</div> 51 52 53 <div class="grid"> 54 <div class="grid__col--12 post"> 55 56 <header class="post__header"> 57 <h1 class="headline-primary">Calculating flex-basis Values and Margins</h1> 58 <div class="post__meta--padded"> 59 <b class="post__author">Guil Hernandez</b> 60 <b class="post__sep">â¢</b> 61 <b class="post__date"> 62 Feb 8, 2017</b> 63 </div> 64 </header> 65 66 67 68 <article class="post__content"> 69 <p>Learn to create a simple Sass function that calculates your <code>flex-basis</code> value, including flexible margins. The <code>per-line()</code> function places the number of flex items defined on one line (if the available space allows it). As a result, your flex items will line up perfectly across multiple flex lines.</p> 70 71<p data-height="265" data-theme-id="0" data-slug-hash="QdVrPR" data-default-tab="css,result" data-user="Guilh" data-embed-version="2" data-pen-title="flex-basis Function" class="codepen">See the Pen <a href="http://codepen.io/Guilh/pen/QdVrPR/">flex-basis Function</a> by Guil H (<a href="http://codepen.io/Guilh">@Guilh</a>) on <a href="http://codepen.io">CodePen</a>.</p>
72<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
72 73 74 75 <a href="https://twitter.com/share" class="twitter-share twitter-share-button" data-via="sassbreak" data-size="large">Tweet this article</a> 76
76<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs'); 77 </script>
77 78 79 80 </article> 81 82 <div class="post__comments"> 83 <div id="disqus_thread"></div>
84<script type="text/javascript"> 85 /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */ 86 var disqus_shortname = 'sassbreak'; // required: replace example with your forum shortname 87 var disqus_identifier = "/calculate-flex-basis/"; 88 89 /* * * DON'T EDIT BELOW THIS LINE * * */ 90 (function() { 91 var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; 92 dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js'; 93 (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); 94 })(); 95</script>
95 96<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript> 97<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a> 98 99 100 </div> 101 102 </div> 103</div> 104 <div class="push"></div> 105 </div> 106 <footer class="panel--centered" role="contentinfo"> 107 <div class="grid"> 108 <div class="grid__col--4"> 109 <a href="https://twitter.com/Dave_Conner" title="Dave Conner - @Dave_Conner"><img class="media__img--avatar" src="https://pbs.twimg.com/profile_images/468537320581238784/BVSoNzeI.jpeg"></a> 110 </div> 111 <div class="grid__col--4"> 112 <a class="site-logo--white" href="/" title="Home"> 113 <b class="srt">Sass Break</b> 114 </a> 115 <p class="site-desc">A simple blog about Sass. <a href="https://twitter.com/sassbreak">@sassbreak</a></p> 116 </div> 117 <div class="grid__col--4"> 118 <a href="https://twitter.com/guilh" title="Guil Hernandez - @guilh"><img class="media__img--avatar" src="https://pbs.twimg.com/profile_images/578368788535455744/WhLtbEaB.jpeg"></a> 119 </div> 120 </div> 121</footer> 122 123 </body> 124</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.