76 lines
1.7 KiB
HTML
76 lines
1.7 KiB
HTML
<!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> |