Skip to content
Permalink
cbb54f0bf8
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

web1/showcase.html

Go to file
 
 
Cannot retrieve contributors at this time
830 lines (502 sloc) 10.8 KB
Raw Blame
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="showcase.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800" rel="stylesheet">
</head>
<body>
<!--[if lte IE 9]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->
<!-- Add your site or application content here -->
<header>
<h1>flex<span>box</span> </h1>
<ul>
<li> <a href="#linktodisplay"> Display </a> </li>
<li> <a href="#linktoalignment"> Alignment</a></li>
<li> <a href="#linktoorder"> Ordering &amp; Orientation</a></li>
<li><a href="#linktoflexibility">Flexibility</a></li>
</ul>
</header>
<a id="linktotop">
<div class="what">
</a>
<div class="whatisflexbox">
<h1>What is Flexbox? </h1>
<p>The Flexbox Layout (Flexible Box) provides an easier way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic.
The main idea behind the flex layout is to give the container the ability to alter its items' width/height, and order to best fill the available space in order to accommodate to all kind of display devices and screen sizes. A flex container expands items to fill available free space, or shrinks them to prevent overflow.</p>
</div>
</div>
<div class="whole">
<div class="flexcontainer">
<h1>flex container</h1>
<div class="items">
<div>flex item</div>
<div>flex item</div>
<div>flex item</div>
</div>
</div>
</div>
<div class="properties">
<h1>Properties</h1>
<article>
<div class="one">
<h2>Alignment</h2>
<ul>
<li>justify-content</li>
<li>align-items</li>
<li>align-self</li>
<li>align-content</li>
</ul>
</div>
<div class="one">
<h2>Ordering &amp; Orientation</h2>
<ul>
<li>flex-direction</li>
<li>flex-wrap</li>
<li>flex-flow</li>
<li>order</li>
</ul>
</div>
<div class="one">
<h2>Flexibility</h2>
<ul>
<li>flex-grow</li>
<li>flex-shrink</li>
<li>flex-basis</li>
<li>flex</li>
</ul>
</div>
</article>
<a id="linktodisplay">
<div class="key">
<p>applies to flex container</p>
<p>applies to flex item</p>
</div>
</div>
<div class="display">
<div class="displaybox">
<h2>Display</h2>
</a>
<ul>
<li>flex</li>
<li>inline-flex</li>
</ul>
</div>
<div class="displayp">
<p> <span>Display:</span> This defines a flex container; inline or block depending on the given value. It enables a flex context for all its direct children.</p>
</div>
</div>
<a id="linktoalignment">
<div class="alignment">
<h1> Alignment </h1>
<h2> justify-content: </h2>
</a>
<p>flex-start</p>
<div class="flex-start">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<p>flex-end</p>
<div class="flex-end">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<p>center</p>
<div class="center">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<p>space-between</p>
<div class="space-between">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</div>
<p>space-around</p>
<div class="space-around">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</div>
<h2> align-items: </h2>
<p>flex-start</p>
<div class="align-flex-start">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<p>flex-end</p>
<div class="align-flex-end">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<p>center</p>
<div class="align-center">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<p>baseline</p>
<div class="align-baseline">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</div>
<p>stretch</p>
<div class="align-stretch">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</div>
<h2> align-self: </h2>
<p>flex-start</p>
<div class="alignself-flex-start">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<p>flex-end</p>
<div class="alignself-flex-end">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<p>center</p>
<div class="alignself-center">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<p>baseline</p>
<div class="alignself-baseline">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</div>
<p>stretch</p>
<div class="alignself-stretch">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</div>
<h2> align-content: </h2>
<p>flex-start</p>
<div class="aligncontent-flex-start">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<p>flex-end</p>
<div class="aligncontent-flex-end">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<p>center</p>
<div class="aligncontent-center">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<p>space-between</p>
<div class="aligncontent-spacebetween">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<p>space-around</p>
<div class="aligncontent-spacearound">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<p>stretch</p>
<div class="aligncontent-stretch">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<a id="linktoorder">
<h1> Ordering &amp; Orientation </h1>
</a>
<h2> flex-direction: </h2>
<p>row</p>
<div class="row">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<p>row-reverse</p>
<div class="rowreverse">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<p>column</p>
<div class="column">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<p>column-reverse</p>
<div class="columnreverse">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<h2> flex-wrap: </h2>
<p>nowrap</p>
<div class="nowrap">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<p>wrap</p>
<div class="wrap">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<p>wrap-reverse</p>
<div class="wrap-reverse">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<h2> flex-flow: </h2>
<p>row nowrap</p>
<div class="row-nowrap">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<p>column-reverse</p>
<div class="column-reverse">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<p>column wrap</p>
<div class="columnwrap">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<p>row-reverse wrap-reverse</p>
<div class="rowreversewrapreverse">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<h2> order: </h2>
<p>-1</p>
<div class="negative1">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<p>0</p>
<div class="zero">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<p>1</p>
<div class="one1">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<a id="linktoflexibility">
<h1> Flexibility </h1>
</a>
<h2> flex-grow: </h2>
<p>0</p>
<div class="flex-grow-zero">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<p>1</p>
<div class="flex-grow-one">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<h2> flex-shrink: </h2>
<p>0</p>
<div class="flex-shrink-zero">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<p>1</p>
<div class="flex-shrink-one">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<h2> flex-basis: </h2>
<p>30%</p>
<div class="thirty">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<p>50%</p>
<div class="fifty">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<p>content</p>
<div class="content">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<footer>
<a href="#linktotop">Back to top</a>
<footer>
<script src="js/vendor/modernizr-3.5.0.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.2.1.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script>
window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
ga('create','UA-XXXXX-Y','auto');ga('send','pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async defer></script>
</body>
</html>