html
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
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<!--1. FLEX DIRECTION-->
<h1>1. Flex Direction</h1>
<p>Flex direction controls how elements are showed.<br />
You can choose row or column directions.</p>
<p><strong>flex-direction:</strong>row; column; row-reverse; column-reverse;</p>
<div class="padding"></div>
<!--FLEX_DIRECTION WRAPPER-->
<div class="flex_direction">
<div class="square1">1</div>
<div class="square2">2</div>
<div class="square3">3</div>
<div class="square4">4</div>
<div class="square5">5</div>
</div>
<!--END OF FLEX_DIRECTION WRAPPER-->
<style contenteditable="true">
.flex_direction {
display: flex;
flex-direction: row;
}
css
css
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
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
h1 {
margin: 1rem;
font-family: "Titillium Web", sans-serif;
}
p {
margin: 1em;
font-family: "Oxygen", sans-serif;
}
/*STYLE contenteditable=true;
inspiration from Mitali :)*/
style {
display: flex;
flex-wrap: wrap;
margin: 1em;
width: 50%;
outline: none;
white-space: pre;
background: #fff;
color: #555;
font-size: 1em;
js
js
1
alert("Write your own css to these black boxes and see instant changes!")
BROWSER
Console
Run