flex詞彙關係圖
案例一
flex-direction
| 值 | 如何對齊 |
|---|---|
| row | 從main start開始到 main end |
| row-reverse | 從main end開始到 main start |
| column | 從cross start開始到 cross end |
| column-reverse | 從cross end 開始到 cross start |
flex-direction: row;
1
2
3
4
5
6.flexContainer {
display: flex;
flex-wrap: wrap;
/* 僅增加這行*/
flex-direction: row ; /*{ row | row-reverse | column | column-reverse }*/
}
flex-direction: row-reverse;
1
2
3
4
5
6
7
8.container {
width: 1280px;
background-color: #be97fd;
margin: auto;
/* 僅增加這行*/
flex-direction: row-reverse ; /*{ row | row-reverse | column | column-reverse }*/
/* 到這裡*/
}
flex-direction: column;
1
2
3
4
5
6
7.flexContainer {
display: flex;
flex-wrap: wrap;
/* 僅增加這兩行*/
height: 800px; /* 如果沒有這行會只有一行，不會換欄 */
flex-direction: column ; /*{ row | row-reverse | column | column-reverse }*/
}
flex-direction: column-reverse;
1
2
3
4
5
6
7
8
9.container {
width: 1280px;
background-color: #be97fd;
margin: auto;
/* 僅增加這兩行*/
height: 800px;/* 如果沒有這行會只有一行，不會換欄 */
flex-direction: column-reverse ; /*{ row | row-reverse | column | column-reverse }*/
/* 到這裡*/
}