-
Notifications
You must be signed in to change notification settings - Fork 843
/
Copy pathcolumns-flexbox.html
89 lines (75 loc) · 2.5 KB
/
columns-flexbox.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>CSS Cookbook: columns with flexbox</title>
<link rel="stylesheet" href="styles.css" />
<style>
.container {
border: 2px solid rgb(75, 70, 74);
border-radius: 0.5em;
padding: 20px 10px;
}
.container > * {
padding: 10px;
border: 2px solid rgb(95, 97, 110);
border-radius: 0.5em;
}
</style>
<style class="editable">
.container {
display: flex;
}
.container > * {
margin: 0 10px;
flex: 1;
}
</style>
</head>
<body>
<section class="preview">
<div class="container">
<p>
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh
onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
</p>
<p>
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot
courgette tatsoi pea sprouts fava bean collard greens dandelion okra
wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
</p>
<p>
Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus
winter purslane kale. Celery potato scallion desert raisin horseradish
spinach carrot soko.
</p>
</div>
</section>
<textarea class="playable playable-css">
.container {
display: flex;
}
.container>* {
margin: 0 10px;
flex: 1;
}</textarea
>
<textarea class="playable playable-html">
<div class="container">
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
melon azuki bean garlic.</p>
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado
daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach
carrot soko. Lotus root water spinach.</p>
</div></textarea
>
<div class="playable-buttons">
<input id="reset" type="button" value="Reset" />
</div>
</body>
<script src="playable.js"></script>
</html>