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_box5.html
+++ b/css_box5.html
@@ -0,0 +1,68 @@
+<!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;
+	
+
+
+
+
+
+}
+
+.itembase{flex-basis:25%;}
+.itema{flex-basis:50%;min-width: 200px; max-width: 300px; color: green}
+
+
+
+
+
+</style>
+
+
+
+</head>
+<body>
+<div class="container">
+<span class="itembase">
+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="itema" >
+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">
+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>
+
+
+</div>
+
+
+
+
+
+
+
+
+</body>
+</html>