我們現在常見的flex的語法有這些
display:flex //(注意：這裡如果沒設成flex，底下語法都無法使用喔!!!)
flex-wrap
flex-direction
flex-flow //(可以同時設定flex-direction和flex-wrap)
justify-content
align-item
align-content
align-self
order
flex (flex-grow、flex-shrink、flex-basis)
第一個:display:
還沒加入flex之前的樣式會是像圖片這樣，呈現縱向
程式碼如下:
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link href="test.css" rel="stylesheet" />
</head>
<body>
<div class="ttp">
<div class="test">I am jojo</div>
<div class="test1">1</div>
<div class="test2">2</div>
<div class="test3">3</div>
<div class="test4">4</div>
<div class="test5">5</div>
</div>
</body>
</html>
.ttp{
height: 300px;
margin: 30px;
}
.test{
margin-top: 10px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 10px;
border: 6px solid red;
}
.test1{
border:6px solid black;
margin-left: 20px;
margin-right: 20px;
}
.test2{
border: 6px solid brown;
margin-left: 20px;
margin-right: 20px;
margin-top: 10px;
}
.test3{
border: 6px solid rgb(59, 119, 164);
margin-left: 20px;
margin-right: 20px;
margin-top: 10px;
}
.test4{
border: 6px solid rgb(143, 59, 164);
margin-left: 20px;
margin-right: 20px;
margin-top: 10px;
}
.test5{
border: 6px solid rgb(59, 164, 64);
margin-left: 20px;
margin-right: 20px;
margin-top: 10px;
}
那接下來是加入flex之後的樣式
程式碼:
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link href="test.css" rel="stylesheet" />
</head>
<body>
<div class="ttp">
<div class="test">I am jojo</div>
<div class="test1">1</div>
<div class="test2">2</div>
<div class="test3">3</div>
<div class="test4">4</div>
<div class="test5">5</div>
</div>
</body>
</html>
.ttp{
height: 300px;
margin: 30px;
display: flex;
}
.test{
margin-top: 10px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 10px;
border: 6px solid red;
}
.test1{
border:6px solid black;
margin-left: 20px;
margin-right: 20px;
}
.test2{
border: 6px solid brown;
margin-left: 20px;
margin-right: 20px;
margin-top: 10px;
}
.test3{
border: 6px solid rgb(59, 119, 164);
margin-left: 20px;
margin-right: 20px;
margin-top: 10px;
}
.test4{
border: 6px solid rgb(143, 59, 164);
margin-left: 20px;
margin-right: 20px;
margin-top: 10px;
}
.test5{
border: 6px solid rgb(59, 164, 64);
margin-left: 20px;
margin-right: 20px;
margin-top: 10px;
}
加入之後的樣式會像圖下這樣:
但我們加入flex之後文字就會變成橫向的
第二個:flex-wrap
我們用flex之後，會發現牠們會擠在同一列，所以我們可以加入flex-wrap，flex-wrap是用來告訴flex是否可以進行換行:
flex-wrap的程式碼如下:
nowrap //預設
wrap //(換行)
wrap-reverse //(換行，且行順序反轉)
第三個:flex-direction
flex-direction決定的是內元件的「排列方向」
flex-direction的程式碼如下:
row //(預設值，由左至右，從上到下)
row-reverse //(排列方向和row一樣，但內元件順序會反轉)
column //(先從上到下，再由左至右)
column-reverse //(排列方向和column一樣，但內元件順序會反轉)
第四個:flex-flow
flex-flow是flex-direction和flex-wrap的縮寫，它可以接受兩個屬性的值，沒有前後順序之分，中間用空格隔開即可
程式碼:
.ttp{
height: 300px;
margin: 30px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
可以寫成:
.ttp{
height: 300px;
margin: 30px;
display: flex;
flex-flow:column wrap;
}
第五個:justify-content
justify-content是用來控制flex「水平對齊」的位置，也就是主軸方向。
程式碼如下:
flex-start //(預設值)會從主軸的起點開始排
flex-end //主軸的「終點」開始排
Center //排在「起點」和「終點」的中間
Space-around //平均分配「元素」位置，但左右兩側的間距會較小
Space-between //平均分配「元素」位置，但左右兩側會貼齊主軸的起點、終點
Space-evenly //元素」和「左右兩側」的間距皆相同
第五個:align-item
和jusitfy-content的用法類似，但它是用來控制「垂直對齊」的位置，也就是交錯軸方向
程式碼如下:
Stretch //(預設值，要測試請記得內元素不能設定height)
flex-start //從交錯軸的「起點」開始排
flex-end //從交錯軸的「終點」開始排
center //讓所有元素在「交叉軸」中間對齊
baseline //讓所有元素的文字基線（baseline）對齊
第六個:align-content
align-content是用來控制flex的「行」在「水平方向」的對齊位置，但是如果想要使用align-content的話，一定要設flex-wrap:wrap，因為它是控制「行」
程式碼如下:
stretch //為預設值，將美行拉伸已填滿剩餘空間
flex-start //從交錯軸的「起點」開始排
flex-end //從交錯軸的「終點」開始排
center //排在「起點」和「終點」的中間
space-around //是平均分配「行」的位置，但上下兩側的間距會較小
space-between //是平均分配「行」的位置，但上下兩側會貼齊交錯軸的起點、終點
space-evenly //是「元素」和「上下兩側」的間距皆相同
第七個:align-self
align-self和align-item的功能一樣，但它是針對「單一」對象
程式碼如下:
Stretch //(預設值，要測試請記得內元素不能設定height)
flex-start //會從交錯軸的「起點」開始排
flex-end //會從交錯軸的「終點」開始排
center //這會讓該元素在「交叉軸」的方向上單獨置中。
baseline //會讓元素對齊「文字的底線位置」
第八個:order
order預設值為0，它可以重新定義內元件的排列順序，順序會依照數值的大小排列
第九個:Flex (flex-grow、flex-shrink、flex-basis)
所謂的flex就是flex-grow、flex-shink、flex-basis的縮寫
flex-grow:空間有剩時，這個元素要「放大多少比例」去吃掉多餘空間。
flex-shink:空間不夠時，這個元素要「縮小多少比例」來配合容器。
flex-basis:主軸方向上的「初始大小」。
