本文直接介紹一些屬性，需要注意什么等等類似的不在介紹，知識點導航
父元素屬性
- flex-direction:項目的排列方向
flex-wrap:若果一條軸線排不下，如何換行
flex-flow
justify-content
align-items
align-content
子元素屬性
- order
flex-grow
flex-shrink
flex-basic
flex
使用之前需在父元素設置“display：flex”
話不多說，直接上代碼，基礎代碼在最下面，會在原有的基礎上添加
.parent{display:flex;}
-設置父元素 display: flex; 這會使每個子元素自動變為伸縮項; 所謂伸縮項，就是說當父元素的寬度不足以容納所有子元素時，會將子元素進行等比例收縮直到父容器足以一行放下所有子元素;
注意，設為 Flex 布局以后，子元素的float、clear和vertical-align屬性將失效
作為父容器的六大屬性
1，flex-direction決定主軸的方向（即項目的排列方向）
- row（默認值）：主軸為水平方向，起點在左端
- row-reverse：主軸為水平方向，起點在右端
- column：主軸為垂直方向，起點在上沿
- column-reverse：主軸為垂直方向，起點在下沿
實例：其中只實驗了一個屬性，對應的圖片分別為下圖，關於父元素的元素全部都是在 . parent的基礎上進行設置
display: flex;
flex-direction: row-reverse;
2，flex-wrap:若果一條軸線排不下，如何換行
- nowrap(默認)：不換行，當容器寬度不夠時，每個子元素會被擠壓寬度
- rwrap：換行，並且第一行在容器最上方
- wrap-reverse：換行，並且排在第一行容器最下面
width：150px;//原來的寬度太大
display: flex;
flex-direction: row-reverse;
3，flex-flow：是flex-direction和，flex-wrap的縮寫。默認值為：flex-flow：row wrap；一般不需要使用
4，justify-content：定義了項目在主軸上的對齊方向
> > 此屬性與主軸方向息息相關。
主軸方向為：row - 起點在左邊，row-reverse -起點在右邊，column - 起點在上邊，column-reverse -起點在下邊
- flex - start(默認值)：項目位於主軸起點。
- flex-end：主軸位於主軸終點。
- center：居中(常用)；
- space-between：兩端對齊，項目之間的距離都相等（開頭和最后的子元素，與父容器邊緣之間么有間隔）
- space-around：每個項目的間隔相同，切兩端間隙是項目間距的一半（開頭和最后的項目，與父容器邊緣有一定距離）
5，align-items：定義項目在交叉軸如何對齊
- flex-start:交叉軸的起點對齊。
- flex-end：交叉軸的終點對齊。
- center：交叉軸的中點對齊。
- baseline：項目第一行文字基線對齊（文字的行高，字體大小會影響每行的基線）
這里以baseline為例；但圖片還是按取值排列，所以對應的圖片是最后一個
font-size：40px//改變第一個子元素的文字大小
<-- 父元素設置 -->
display: flex;
align-items:baseline;
6，align-content:定義了多跟軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用
>>當項目換為多行時，可使用align-content取代align-items
- flex - start：與交叉軸起點對齊。
- flex-end：與交叉軸終點對齊。
- center：與交叉軸中點對齊。
- space-between：兩端對齊
- spance-around：每根軸線距離相等
display: flex;
align-content：flex - start
關於父元素的屬性就介紹到這里。還有一個小的知識點，是我在視頻上看見的
.parent{float:flex}
.child{margin:auto}
這個的效果是上下居中，左右分散對齊的效果，感覺就像
justify-content：space-around和
align-items：center的結合體。
很常用
作為子元素的屬性
1，order:定義項目的排列順序。數值越小，排列越靠前。默認為 0
.child_1{order:2}
.child_1{order:1}
2，flex-grow:定義放大比例。默認0。即如果存在剩余空間，也不放大
>>這個可以說是個比例吧，當只有一個子元素設置時，即放大倍數，不過最好幾個一起設置
.child_1{flex-grow:1}
.child_2{flex-grow:1}
.child_3{flex-grow:2}
.child_4{flex-grow:2}
如圖所示，子元素1,2,3,4都設置的這個屬性，效果是在父元素寬度上進行分配。子元素3,4和子元素1,2的比例是1:2
3，flex-shrink：定義了項目的縮小比例。默認為1；即如果空間不足，該項目將縮小
>>這個吧，即在父元素縮小的時候，讓這個子元素不縮小，取值試了一下，好像是0-1，如果取值為0.5的話，即子元素最小縮小50%，為0則不能縮小，當然了，如果設置的總寬度超過了父元素，則會在父元素之外顯示
.child{flex-shrink:0}
4,flex-basic:項目占據的主軸空間（如過主軸為水平，則設置這個屬性，相當於設置寬度，原有width失效）
.child_1{flex-basis: 200px;}
5，flex：此屬性是flex-grow，flex-shrink和flex-basic的簡寫，默認值 0 1 auto，后兩個屬性可選
基礎代碼如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>彈性布局</title>
<style type="text/css"> * { font-size: 30px; } .parent { width: 500px; height: 500px; border: 1px solid red; } .child_1 { width: 50px; height: 50px; background: pink; } .child_2 { width: 50px; height: 60px; background: blue; } .child_3 { width: 50px; height: 70px; background: gray; } .child_4 { width: 50px; height: 80px; background: red; } .child_5 { width: 50px; height: 90px; background: yellow; } </style>
</head>
<body>
<div class="parent">
<div class="child child_1">1</div>
<div class="child child_2">2</div>
<div class="child child_3">3</div>
<div class="child child_4">4</div>
<div class="child child_5">5</div>
</div>
</body>
</html>
結果如下
