Flex
Flex - align-items/align-content stretch 無作用
如果子容器或是元件，在有設定高度（height）的情況下，這個 stretch 會被忽略，自動變成 flex-start(align-items/)/normal(align-content)
直接擺 image, flex 無效,加上 div 可縮小但不能放大,加上 min-width: 0 可放大也可縮小(不用加 div)
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
| <style>
img {
max-width: 100%;
height: auto;
display: block;
}
.menu-list {
display: flex;
}
img {
min-width: 0;
flex-shrink: 1;
flex-grow: 1;
}
</style>
<body>
<div class="menu-list">
<div>
<img src="./img/f-001.png" alt="">
</div>
<div>
<img src="./img/f-002.png" alt="">
</div>
<div>
<img src="./img/f-003.png" alt="">
</div>
<div>
<img src="./img/f-004.png" alt="">
</div>
</div>
<div class="menu-list">
<img src="./img/f-001.png" alt="">
<img src="./img/f-002.png" alt="">
<img src="./img/f-003.png" alt="">
<img src="./img/f-004.png" alt="">
</div>
</body>
|
Other
display: inline-block 設定 margin=0 還是會有間格
換行或space造成,可移除換行,間隔或加入 common
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <style>
.debug *, .debug {
outline: 1px solid gold;
}
.box {
display: inline-block;
margin:0;
width: 100px;
height: 50px
}
</style>
<body>
<div class="debug">
<div class="box">111</div><div class="box">222</div>
<div class="box">333</div>
<div class="box">444</div>
<div class="box">555</div>
</div>
</body>
|
inline-block 元件, 再插入含文字的元件會造成跑版
應是文字會對齊最後一個 baseline
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
| <style>
.debug *, .debug {
outline: 1px solid gold
}
html {
font-size: 12px;
}
html, body, h1 ,h2 ,h3 ,h4 ,h5 ,h6 ,p {
padding: 0;
margin: 0;
}
.debug {
margin: 10px;
}
.box {
display: inline-block;
width: 100px;
height: 50px;
background: gray;
}
h1 {
background: yellow;
height: auto;
}
p {
background: red;
height: auto;
}
</style>
<body>
<div class="debug">
<div class="box">111</div>
<div class="box">222</div>
<div class="box">333</div>
<div class="box">
51
<h1>555</h1>
<p>555-p</p>
</div>
<div class="box">444</div>
</div>
</body>
|
要設定 width: 100% 才能佔整行
1
2
3
4
5
| button {
display: block;
width: 100%;
}
|
設定 margin: 0 auto; 不能置中
要設定 display block
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
width: 500px;
padding: 20px;
border: 1px solid #000;
}
.kick {
background: #E62A45;
color: #fff;
width: 200px;
border-radius: 8px;
outline: none;
border: none;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box">
<button class="kick">我要抽獎</button>
</div>
</body>
</html>
|
<a> tag not working
- 被其他元件遮住,故要將 z-index 調高,或將其他元件 z-index 調低
- z-index 要有效,要設定 position: absolute, relative 或 fixed
1
2
3
4
5
6
7
8
9
| .games .item a{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
z-index: 10;
}
|
設定 overflow: hidden;,造成 相鄰行內元素向下偏移
- 設定 vertical-align: bottom; 即可修正
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <style>
.box {
padding: 10px;
}
.box-1,
.box-2 {
display: inline-block;
width: 100px;
}
.box-2 {
overflow: hidden;
vertical-align: bottom;
}
</style>
<div class="box debug">
<span class="box-1">AAA</span>
<span class="box-2">BBB</span>
<span class="box-1">CCC</span>
<span class="box-2">DDD</span>
</div>
|
