-
Notifications
You must be signed in to change notification settings - Fork 843
/
Copy pathcolumns-flexbox.html
85 lines (67 loc) · 2.54 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Cookbook: columns with flexbox</title>
<link rel="stylesheet" href="styles.css">
<style>
.container {
border: 2px solid rgb(75, 70, 74);
border-radius: .5em;
padding: 20px 10px;
}
.container>* {
padding: 10px;
border: 2px solid rgb(95, 97, 110);
border-radius: .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>