some exercies on css3 box model and flex

2014-11-23 22:07:03 +01:00
parent be34f479d5
commit 5c9f10d07f
7 changed files with 503 additions and 0 deletions
--- a/css_box5flexbox.html
+++ b/css_box5flexbox.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!-- http://css-tricks.com/snippets/css/a-guide-to-flexbox/ -->
+<html>
+<head>
+	<title>css</title>
+	<meta name="author" content="xgiovio"/>
+	<meta name="description" content="A simple test page"/>
+	<meta name="keywords" content="Ormai google non se le fila piu"/>
+	<meta name ="robots" content="index"/>
+	<meta charset="utf-8"/>
+
+
+<style>
+
+.container {
+
+	display:flex;
+	flex-direction:row;
+	flex-wrap:wrap;
+	justify-content:space-around;
+	align-items:stretch;
+	border:solid 1px gray;
+	padding: 50px;
+
+
+
+
+}
+
+.itembase{flex-basis:100px;border:solid 1px gray;}
+.item1{order:1;}
+.item2{order:3;}
+.item3{order:2;flex-basis:200px;flex-shrink:1;}
+
+
+
+
+</style>
+
+
+
+</head>
+<body>
+<div class="container">
+<span class="itembase item1">
+1There are lots of different kinds of fruit - there are over 500 varieties
+of banana alone. By the time we add the countless types of apples, oranges,
+and other well-known fruit, we are faced with thousands of choices.
+</span>
+<span class="itembase item2">
+2of banana alone. By the time we add the countless types of apples, oranges,
+and other well-known fruit, we are faced with thousands of choices.
+</span>
+<span class="itembase item2">
+2of banana alone. By the time we add the countless types of apples, oranges,
+and other well-known fruit, we are faced with thousands of choices.
+</span>
+<span class="itembase item2">
+2of banana alone. By the time we add the countless types of apples, oranges,
+and other well-known fruit, we are faced with thousands of choices.
+</span>
+<span class="itembase item3">
+3of banana alone. By the time we add the countless types of apples, oranges,
+and other well-known fruit, we are faced with thousands of choices.
+</span>
+</div>
+
+
+
+
+
+
+
+
+</body>
+</html>