Flexbox是CSS3的盒模型，這個屬性是用來做排版使用，也因為它可以靈活彈性排版的特性，也很常使用在RWD(響應式設計)上面。
當下了flex語法之後，裡面的排列方式會分成橫軸與縱軸(直軸)，概念有點像是以前國中時期所學的座標，就是X軸Y軸的概念，不過有點不一樣的是，XY軸以正向來說起始點會是在左下角，如果忘記的話我簡單畫個圖喚醒一下大家國中面對考試的痛苦(大誤)。
但是在使用flex的時候，預設的起始點則是在左上角，不過也可以使用語法做排列上的修改
他會有各種不同可以排版的方式，在使用flex之前，區塊元素預設會是由上往下排列，但是如果使用flex，預設則會變成由左到右，不過這也是可以依照需求去另外寫語法做調整的。
以下是沒有使用flex
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
| <style>
.container{
margin: 10px;
flex-wrap: wrap;
border: 1px solid blue;
}
.item1{
color:white;
text-align:center;
line-height: 50px;
height:50px;
width:50px;
background-color:green;
}
.item2{
color:white;
text-align:center;
line-height: 50px;
height:50px;
width:50px;
background-color:yellow;
}
.item3{
color:white;
text-align:center;
line-height: 50px;
height:50px;
width:50px;
background-color:gray;
}
</style>
<div class="container">
<div class="item1">item1</div>
<div class="item2">item2</div>
<div class="item3">item3</div>
</div>
|
以下是在container加上display:flex後的效果
1
2
3
4
5
6
7
| <style>
.container{
display:flex;
margin: 10px;
flex-wrap: wrap;
border: 1px solid blue;
}
|
flex可以設定一些排列方式，有分成容器(container)，以及內容物(item)，這些語法部分我們會在下一篇提到。