此篇是透過幾個不同的練習範例，運用 flexbox 或是 css grid 來達成目標結果
Demo | Github
Flexbox vs CSS Grid
此篇練習了以下幾個主題
- Axis Flipping!
- Controls on Right!
- Flex on Item!
- Perfectly Centered!
- Self Control!
- Stacked Layout!
- Unknown Content Size!
- Unknown Number of Items!
- Variable Widths on Each Row!
Axis Flipping
練習使用 auto-fit 來達到基準軸線的變動
1
2
3
4
5
6
7
8
9
| .flipper {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
}
.flipper.flip {
grid-template-columns: 1fr;
}
|
Controls on Right
把控制的項目置右，主要是 grid-auto-flow
1
2
3
4
5
6
7
8
| .track {
background: white;
padding: 10px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
display: grid;
grid-template-columns: 1fr;
grid-auto-flow: column;
}
|
Flex on Item
可以使用 flex 或是 grid 來達成
使用 flex
1
2
3
4
5
6
7
8
9
10
11
12
13
| .controls {
margin: 200px 0;
display:flex;
align-items: center;
}
.scrubber {
background: #BADA55;
height: 10px;
min-width: 100px;
border-radius: 10px;
flex: 1;
}
|
使用 grid
1
2
3
4
5
6
7
8
9
10
11
12
13
| .controls {
margin: 200px 0;
display: grid;
grid-template-columns: auto auto auto 1fr auto auto;
align-items: center;
}
.scrubber {
background: #BADA55;
height: 10px;
min-width: 100px;
border-radius: 10px;
}
|
Perfectly Centered
此練習也是兩種方法都可以達成
flex
1
2
3
4
5
6
7
8
| .hero {
height: 200px;
background: rgba(255, 255, 255, 0.2);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
|
grid
1
2
3
4
5
6
7
| .hero {
height: 200px;
background: rgba(255, 255, 255, 0.2);
display: grid;
align-content: center;
justify-items: center;
}
|
Self Control
讓區塊資料按照邊框對齊
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| .corners {
display: grid;
height: 200px;
width: 200px;
border: 10px solid var(--yellow);
grid-template: 1fr 1fr/1fr 1fr;
align-items: end;
justify-items: end;
}
.corner:nth-child(1),
.corner:nth-child(2) {
align-self: start;
}
.corner:nth-child(1),
.corner:nth-child(3) {
justify-self: start;
}
|
Stacked Layout
排列多行，且內容的大小一致，其間格按照各行的剩餘空間平均分配
1
2
3
4
5
6
7
8
9
10
| .stacked {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.stacked>* {
width: 30%;
margin-bottom: 20px;
}
|
Unknown Content Size
把一個縱列變成橫列
1
2
3
4
5
6
7
| .known {
margin: 100px 0;
display: grid;
grid-template-columns: repeat(5,auto);
grid-gap: 20px;
justify-content: center;
}
|
Unknown Number of Items
不知道內容元素的數量，利用 auto-fit 來調整
1
2
3
4
5
| .unknown {
display: grid;
grid-template-columns: repeat(auto-fit ,minmax(50px, 1fr));
grid-gap: 20px;
}
|
Variable Widths on Each Row
每一元素寬度都不同
1
2
3
4
5
6
7
8
9
10
| .flex-container {
display: flex;
flex-wrap: wrap;
border: 1px solid black;
}
.flex-container>* {
margin: 10px;
flex: 1;
}
|
線上展示
筆記與備註事項
CSS flex-direction 属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向(正方向或反方向)。
注意，值 row 和 row-reverse 受 flex 容器的方向性的影响。 如果它的 dir 属性是 ltr，row 表示从左到右定向的水平轴，而 row-reverse 表示从右到左; 如果 dir 属性是 rtl，row 表示从右到左定向的轴，而 row-reverse 表示从左到右。
資料來源 - MDN
CSS flex-wrap 指定 flex 元素单行显示还是多行显示 。如果允许换行，这个属性允许你控制行的堆叠方向。
資料來源 - MDN
參考資料