Commit f6073f37 authored by aline's avatar aline

add css

parent 96a8f18e
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../css/style.css" />
<link rel="stylesheet" href="../node_modules/highlight.js/styles/github.css" />
<style type="text/css">
</style>
<title>Box-sizing</title>
</head>
<body>
<h1>Box-sizing</h1>
<div class="box">
Box 1
</div>
<div class="box">
Box 2
</div>
<div class="box">
Box 3
</div>
</body>
</html>
body {
margin:0;
padding:10px 40px;
background:#fff;
font-size: 1.4em;
font-family: helvetica, arial, serif;
}
h1 {
font-size:1.8em;
}
h2 {
font-size:1.1em;
text-decoration: underline;
}
h3 {
color: gray;
font-size:1.0em;
text-decoration: underline;
}
.parent {
border: 5px solid #000;
width: 80%;
outline: 1px solid #333;
background: #eee;
margin: 0;
padding: 0;
display: -webkit-flex;
/* OK chrome 21 */
display: flex;
}
li {
color: #fff;
padding: 10px;
list-style: none;
background: purple;
}
li:nth-child(2) {
background: indigo;
}
li:nth-child(3) {
background: blue;
}
li:nth-child(4) {
background: green;
}
li:nth-child(5) {
background: yellow;
}
.box {
border: solid blue;
width: 33%;
box-sizing: border-box;
}
.box:nth-child(1) {
padding: 10px;
}
.box:nth-child(2) {
border: 1px;
}
.box:nth-child(3) {
padding-left: 2em;
}
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../css/style.css" />
<link rel="stylesheet" href="../node_modules/highlight.js/styles/github.css" />
<title>Mise en page CSS avec Flexbox</title>
</head>
<body>
<h1>Mise en page CSS avec Flexbox</h1>
<h2>1 : display: flex</h2>
<ul class="parent">
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
<li>Element 5</li>
</ul>
<pre>
<code class="html">
<ul class="parent">
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
<li>Element 5</li>
</ul>
</code>
</pre>
<pre>
<code class="css">
.parent {
border: 5px solid #000;
display: flex;
}
</code>
</pre>
<script src="./node_modules/highlight.js/lib/highlight.js"></script>
<script>
document.querySelectorAll("code").forEach(function(element) {
element.innerHTML = element.innerHTML.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
});
hljs.initHighlightingOnLoad();
</script>
</body>
</html>
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../css/style.css" />
<link rel="stylesheet" href="../node_modules/highlight.js/styles/github.css" />
<style>
.parent { flex-direction: column;; }
</style>
<title>Mise en page CSS avec Flexbox</title>
</head>
<body>
<h1>Mise en page CSS avec Flexbox</h1>
<h2>2 : flex-direction: column</h2>
<ul class="parent">
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
<li>Element 5</li>
</ul>
<pre>
<code class="html">
<ul class="parent">
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
<li>Element 5</li>
</ul>
</code>
</pre>
<pre>
<code class="css">
.parent {
border: 5px solid #000;
display: flex;
flex-direction: column;
}
</code>
</pre>
<script src="./node_modules/highlight.js/lib/highlight.js"></script>
<script>
document.querySelectorAll("code").forEach(function(element) {
element.innerHTML = element.innerHTML.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
});
hljs.initHighlightingOnLoad();
</script>
</body>
</html>
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../css/style.css" />
<link rel="stylesheet" href="../node_modules/highlight.js/styles/github.css" />
<style type="text/css">
.parent:nth-of-type(1) {
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.parent:nth-of-type(2) {
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
</style>
<title>Mise en page CSS avec Flexbox</title>
</head>
<body>
<h1>Mise en page CSS avec Flexbox</h1>
<h2>3 : flex-wrap: ... <em>(resize browser)</em></h2>
<h3>3.1 : flex-wrap: nowrap</h3>
<ul class="parent">
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
<li>Element 5</li>
</ul>
<h3>3.2 : flex-wrap: wrap</h3>
<ul class="parent">
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
<li>Element 5</li>
</ul>
</body>
</html>
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../css/style.css" />
<link rel="stylesheet" href="../node_modules/highlight.js/styles/github.css" />
<style type="text/css">
.parent {
display: flex;
justify-content: flex-start;
}
.parent:nth-of-type(2) {
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
.parent:nth-of-type(3) {
-webkit-justify-content: center;
justify-content: center;
}
.parent:nth-of-type(4) {
-webkit-justify-content: space-between;
justify-content: space-between;
}
.parent:nth-of-type(5) {
-webkit-justify-content: space-around;
justify-content: space-around;
}
</style>
<title>Mise en page CSS avec Flexbox</title>
</head>
<body>
<h1>Mise en page CSS avec Flexbox</h1>
<h2>4 : justify-content</h2>
<h3>4.1 : flex-start</h3>
<ul class="parent">
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
<li>Element 5</li>
</ul>
<h3>4.2 : flex-end</h3>
<ul class="parent">
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
<li>Element 5</li>
</ul>
<h3>4.3 : center</h3>
<ul class="parent">
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
<li>Element 5</li>
</ul>
<h3>4.4 : space-between</h3>
<ul class="parent">
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
<li>Element 5</li>
</ul>
<h3> 4.5 space-around</h3>
<ul class="parent">
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
<li>Element 5</li>
</ul>
</body>
</html>
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../css/style.css" />
<link rel="stylesheet" href="../node_modules/highlight.js/styles/github.css" />
<style type="text/css">
.parent {
align-items: flex-start;
}
.parent:nth-of-type(2) {
-webkit-align-items: flex-end;
align-items: flex-end;
}
.parent:nth-of-type(3) {
-webkit-align-items: center;
align-items: center;
}
.parent:nth-of-type(4) {
-webkit-align-items: baseline;
align-items: baseline;
}
.parent:nth-of-type(5) {
-webkit-align-items: stretch;
align-items: stretch;
}
</style>
<title>Mise en page CSS avec Flexbox</title>
</head>
<body>
<h1>Mise en page CSS avec Flexbox</h1>
<h2>5 : align-items</h2>
<h3>5.1 :flex-start</h3>
<ul class="parent">
<li>Element 1</li>
<li>Element <br />2</li>
<li>Element 3</li>
<li>Element 4</li>
<li>Element 5</li>
</ul>
<h3>5.2 : flex-end</h3>
<ul class="parent">
<li>Element 1</li>
<li>Element <br />2</li>
<li>Element 3</li>
<li>Element 4</li>
<li>Element 5</li>
</ul>
<h3>5.3 : center</h3>
<ul class="parent">
<li>Element 1</li>
<li>Element <br />2</li>
<li>Element 3</li>
<li>Element 4</li>
<li>Element 5</li>
</ul>
<h3>5.4 : baseline</h3>
<ul class="parent">
<li>Element 1</li>
<li>Element <br />2</li>
<li>Element 3</li>
<li>Element 4</li>
<li>Element 5</li>
</ul>
<h3>5.5 : stretch</h3>
<ul class="parent">
<li>Element 1</li>
<li>Element <br />2</li>
<li>Element 3</li>
<li>Element 4</li>
<li>Element 5</li>
</ul>
<pre>
<code class="html">
<ul class="parent">
<li>Element 1</li>
<li>Element <br />2</li>
<li>Element 3</li>
<li>Element 4</li>
<li>Element 5</li>
</ul>
</code>
</pre>
</body>
</html>
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../css/style.css" />
<link rel="stylesheet" href="../node_modules/highlight.js/styles/github.css" />
<style type="text/css">
.parent:nth-of-type(1) li {
-webkit-flex: initial;
flex: initial;
}
.parent:nth-of-type(2) li:last-child {
-webkit-flex: 1;
flex: 1;
}
.parent:nth-of-type(3) li:nth-of-type(4), .kiwi:nth-of-type(3) li:last-child {
-webkit-flex: 1;
flex: 1;
}
.parent:nth-of-type(4) li {
-webkit-flex: 1;
flex: 1;
}
</style>
<title>Mise en page CSS avec Flexbox</title>
</head>
<body>
<h1>Mise en page CSS avec Flexbox</h1>
<h2>6 : flex</h2>
<h3>6.1 : flex: initial</h3>
<ul class="parent">
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
<li>Element 5</li>
</ul>
<h3>6.2 : flex: 1 (dernier enfant)</h3>
<ul class="parent">
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
<li>Element 5</li>
</ul>
<h3>6.3 : flex: 1 (4è et 5è enfant)</h3>
<ul class="parent">
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
<li>Element 5</li>
</ul>
<h3>6.4 : flex: 1 (tous)</h3>
<ul class="parent">
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
<li>Element 5</li>
</ul>
</body>
</html>
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../css/style.css" />
<link rel="stylesheet" href="../node_modules/highlight.js/styles/github.css" />
<style type="text/css">
.parent {
display: flex;
flex-direction: column;
}
li:nth-of-type(3) {
-webkit-order: 1;
order: 1;
}
</style>
<title>Mise en page CSS avec Flexbox</title>
</head>
<body>
<h1>Mise en page CSS avec Flexbox</h1>
<h2>7 : order</h2>
<ul class="parent">
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
<li>Element 5</li>
</ul>
<pre>
<code class="css">
li:nth-of-type(3) {
-webkit-order: 1;
order: 1;
}
</code>
</pre>
</body>
</html>
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<!-- exmple tiré du codepen https://codepen.io/abbeyjfitzgerald/pen/RgRoKy -->
<div class="container">
<div class="header">
<p class="logo">
<a href="#"><i class="fa fa-file-code-o" aria-hidden="true"></i></a>
</p>
<nav>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<button>Login</button>
</div>
<div class="hero"></div>
<aside class="sidebar">
<h3>Recent Posts</h3>
<ul>
<li><a href="#">Post One</a></li>
<li><a href="#">Post Two</a></li>
<li><a href="#">Post Three</a></li>
<li><a href="#">Post Four</a></li>
<li><a href="#">Post Five</a></li>
</ul>
</aside>
<div class="main">
<!-- <img src="http://abbeyjfitzgerald.com/wp-content/uploads/2017/06/combined-layout-header.jpg"> -->
<h2>Flexbox and CSS Grid Layout</h2>
<p>It's okay to combine CSS Grid Layout and Flexbox.</p>