csstdg5figs/11-flexbox/flex-flow-empty-space.html at main · meyerweb/csstdg5figs · GitHub

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
90
91
92
93
94
95
96
97
98
99
100
101
<!doctype html>
<html class="code">
<head>
  <meta charset="utf-8"/>
  <title>Empty space will be in the direction of main-end and cross-end</title>

  <link rel="stylesheet" href="c/examples.css"/>
  <style contenteditable>
body {
  text-align: center;
  padding: 3em 6em;
}

article {
  width: 24em;
}
section {
  display: flex;
  position: relative;
  border: 1px dashed;
  padding: 10px;
  background: #EEE;
  width: 24em; height: 14em;
}
section > span {
  border: 1px solid;
  margin: 10px;
  padding: 0.5em 1em;
  background-color: rgba(0, 0, 0, 0.1);
}
section > div {
  position: absolute; top: -1.2em; left: -5em;
	display: flex; justify-content: space-between;
}
section > div span {
  margin: 0 0.33em;
}
section > div.cross {
	flex-direction: row-reverse;
	color: red;
	right: -1px;
	left: -5.5em;
	padding-bottom: 1.1em;
	background: url(i/arrow-left.svg) 0 50% / 0.33em 0.75em no-repeat,
		linear-gradient(to left,red,red)  50% 50% / 100% 3px no-repeat,
		linear-gradient(to left,red,red)  100% 50% / 3px 2ch no-repeat;
}
section > div.cross .end {
  margin-left: 0.5em;
  translate: 0 1.25em;
}
section > div.main {
	flex-direction: column-reverse;
	color: blue;
	top: -2.4em;
	bottom: -1px;
	width: 10em;
	align-items: flex-start;
	background: url(i/arrow-up.svg) 50% 0 / 0.75em 0.33em no-repeat,
		linear-gradient(to top,blue,blue)  50% 50% / 3px 100% no-repeat,
		linear-gradient(to top,blue,blue)  50% 100% / 2ch 3px no-repeat;
}
section > div.main .end {
  align-self: flex-end; margin-top: 0.5em;
}
.start, .end {
	font: 1em Helvetica, sans-serif;
}

section + p {
  margin-top: 0.25em;
}
</style>
</head>
<body>
<article>
<section style="flex-flow: column-reverse wrap-reverse">
  <span>A</span>
  <span>BB</span>
  <span>CCC</span>
  <span>DDDD</span>
  <span>EEE<br>EE</span>
  <span>FFF<br>FFF</span>
  <span>GGG<br>GGG</span>
  <span>HHH<br>HHH<br>HHH</span>
  <span>IIIII<br>IIIII</span>
  <span>JJJJ<br>JJJ<br>JJJJ</span>
<div class="main">
<span class="start">Main-start</span>
<span class="end">Main-end</span>
</div>
<div class="cross">
<span class="start">Cross-start</span>
<span class="end">Cross-end</span>
</div>
</section>
<p>flex-row: column-reverse wrap-reverse</p>
</article>

</body>
</html>