Skip to content
Permalink
master
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?

css-self-practice/index.html

Go to file
 
 
Cannot retrieve contributors at this time
134 lines (130 sloc) 8.09 KB
Raw Blame
Open in GitHub Desktop
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Flex Box 101</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="icon" href="http://forums.everythingicafe.com/data/MetaMirrorCache/photar.net_emoji_emoji_E405.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<header>
<h1>This page will show you how Flexbox css works!</h1>
</header>
<div id="container1">
<h1>THE BASICS</h1>
<h2>What is Flexbox?</h2>
<p>To start, Flex Box is "Flexible Layout". This is done by utilizing various CSS commands which increase layout efficiency by making it easier to align and distribute space among items in a container, even when their size is unknown. We will start with the first three basic commands.</p>
</div>
<div id="container2">
<div class="basics">
<h2>justify-content</h2>
<ul>
<li><span class="code-font">flex-start</span>: Items align to the left side of the container.</li>
<li><span class="code-font">flex-end</span>: Items align to the right side of the container.</li>
<li><span class="code-font">center</span>: Items align at the center of the container.</li>
<li><span class="code-font">space-between</span>: Items display with equal spacing between them.</li>
<li><span class="code-font">space-around</span>: Items display with equal space around them.</li>
</ul>
</div>
<div class="basics">
<h2>align-items</h2>
<ul>
<li><span class="code-font">flex-start</span>: Items align to the top of the container.</li>
<li><span class="code-font">flex-end</span>: Items align to the bottom of the container.</li>
<li><span class="code-font">center</span>: Items align at the vertical center of the container.</li>
<li><span class="code-font">baseline</span>: Items display at the baseline of the container.</li>
<li><span class="code-font">stretch</span>: Items are streched to fit the container.</li>
</ul>
</div>
<div class="basics">
<h2>flex-direction</h2>
<ul>
<li><span class="code-font">row</span>: Items are placed the same as the text direction.</li>
<li><span class="code-font">row-reverse</span>: Items are placed opposite to the text direction.</li>
<li><span class="code-font">column</span>: Items are placed top to bottom.</li>
<li><span class="code-font">column-reverse</span>: Items are placed bottom to top.</li>
</ul>
</div>
</div>
<div id="container3">
<div id="column1">
<div class="column-header">
<h3>Here are some css examples.</h3>
</div>
<div id="part1css">
<h3>So here we are going to use <span class="code-font">justify-content</span> and<span class="code-font">space-between</span> to add equal space between Joels</h3>
<p><span class="code-font">#part1 {</span></p>
<p><span class="code-font">display: flex;</span></p>
<p><span class="code-font">justify-content: space-between;</span></p>
<p><span class="code-font">}</span></p>
</div>
<div id="part2css">
<h3>Here we will use <span class="code-font">justify-content</span> and<span class="code-font">align-items</span> to put Joel in the exact center of the div.</h3>
<p><span class="code-font">#part1 {</span></p>
<p><span class="code-font">display: flex;</span></p>
<p><span class="code-font">justify-content: center;</span></p>
<p><span class="code-font">align-items: center;</span></p>
<p><span class="code-font">}</span></p>
</div>
<div id="part3css">
<h3>Here we will use <span class="code-font">align-self</span> and<span class="code-font">align-items</span> to put one Joel in the exact center, at the bottom of the div.</h3>
<p><span class="code-font">#part1 {</span></p>
<p><span class="code-font">display: flex;</span></p>
<p><span class="code-font">align-items: flex-start;</span></p>
<p><span class="code-font">justify-content: space-between</span></p>
<p><span class="code-font">}</span></p>
<p><span class="code-font">.joel1 {</span></p>
<p><span class="code-font">align-self:flex-end;</span></p>
<p><span class="code-font">}</span></p>
</div>
</div>
<div id="column2">
<div class="column-header">
<h3>This is what they look like.</h3>
</div>
<div id="part1flex">
<img src="img/joel.png" alt="joel" class="joel">
<img src="img/joel.png" alt="joel" class="joel">
<img src="img/joel.png" alt="joel" class="joel">
</div>
<div id="part2flex">
<img src="img/joel.png" alt="joel" class="joel">
</div>
<div id="part3flex">
<img src="img/joel.png" alt="joel" class="joel">
<img src="img/joel.png" alt="joel" class="joel">
<img src="img/joel.png" alt="joel" class="joel1">
<img src="img/joel.png" alt="joel" class="joel">
<img src="img/joel.png" alt="joel" class="joel">
</div>
</div>
</div>
<footer>
<h4>I hope you enjoyed these helpful hints. For more help you can go to <a href="http://flexboxfroggy.com/">flexboxfroggy.com</a>for some more flex box fun.</h4>
</footer>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.12.0.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='https://www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X','auto');ga('send','pageview');
</script>
</body>
</html>