@hellozxy9527flex彈性布局的使用
關於彈性布局的簡介
在之前的學習中，對頁面布局有了大概的了解，發現許多頁面的布局都是遵循幾個盒子水平排列，或是豎直排列；豎直排列還好，水平方向則需要使用float屬性，在加上設定間隔等，**繁多，且容易混淆。而flex彈性布局則良好的解決了這個問題。
1.容器：需要新增彈性布局的父元素
2.專案：彈性布局容器的每乙個子元素，稱為專案
3.主軸：在彈性布局中，我們會通過屬性規定水平/垂直主軸
1.給父容器新增display：flex屬性，即可使容器內容採用彈性布局顯示，而不遵循常規流的顯示方式；
display:flex;3.display：flex；容器新增彈性布局後，顯示為塊級元素；display：inline-flex；容器新增彈性布局後，顯示為行級元素。
4.設為flex布局後，子元素的float屬性將失效。但是postion屬性，依然生效。
1.flex-direction屬性決定主軸的方向（即專案的排列方向）;
flex-direction
:row;
/*主軸為水平方向，起點在左端；*/
flex-direction
:row-reverse;
/*主軸為水平方向，起點在右端；*/
flex-direction
:column;
/*主軸為垂直方向，起點在上沿；*/
flex-direction
:column-reverse;
/*主軸為垂直方向，起點在下沿；*/
flex-warp
:nowarp;
/*不換行，當容器寬度不夠時，每個專案會被擠壓寬度；*/
flex-warp
:warp;
/*換行，並且第一行在容器最上方；*/
flex-warp
:wrap-reverse;
/*換行，並且第一行在容器最下方；*/
主軸方式為：row-起點在左邊，row-reverse，起點在右邊，colum-起點在上邊，column-reverse起點在下邊
justify-content
:flex-start;
/*專案位於主軸起點*/
justify-content
:flex-end;
/*專案位於主軸終點*/
justify-content
:center;
/*專案位於主軸中點，居中*/
justify-content
:space-between;
/*兩端對齊，專案之間的間隔相等。（開頭和最後的專案，與父容器邊緣沒有間隔）*/
justify-content
:space-around;
/*每個專案兩側的間隔相等。所有專案之間的間隔比專案與邊框的間隔大一倍。（開頭和最後的專案，與父容器邊緣有一定的間隔）*/
justify-content
:space-evenly;
/*每個專案兩側的間隔相等。所有專案之間的間隔和專案與邊框的間隔相同。*/
align-items
:flex-start;
/*交叉軸的起點對齊*/
align-items
:flex-end;
/*交叉軸的終點對齊*/
align-items
:center;
/*交叉軸的中點對齊*/
align-items
:baseline;
/*交叉的第一行文字的基線對齊。（文字的行高，字型大小會影響每行的基線）*/
align-items
:stretch;
/*如果專案未設定高度或設為auto，將佔滿整個容器的高度。*/
2.flex-grow屬性定義專案的放大比例，預設0，即如果存在剩餘空間，也不放大。
3.flex-shrink屬性定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小
4.flex-basis定義專案佔據的主軸空間。（如果主軸為水平，則設定這個屬性，相當於設定專案的寬度。原width會失效）
5.flex屬性是flex-grow，flex-shrink和flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。
此屬性有兩個快捷設定：auto=（1 1 auto）/none=（0 0 auto）
6.align-self：定義單個專案自身在交叉軸上的排列方式，可以覆蓋掉容器上的align-items屬性。屬性值：與align-items相同，預設為auto，表示繼承父容器上的align-items屬性。
有了彈性布局，在頁面布局時，可以少走許多彎路，更快完成**的編寫。
flex布局（彈性布局）
flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為flex布局。box行內元素也可以使用flex布局。boxwebkit核心的瀏覽器，必須加上 webkit字首。box注意，設為flex布局以後，子元素的float clear和vert...
Flex布局（彈性布局）
flex是flex box的縮寫，即彈性布局。任何乙個容器都可以指定為flex布局。行內元素也可以使用flex布局。webkit核心的瀏覽器，必須加上 webkit字首。box.box.box注意 設為flex布局以後，子元素的float clear和vertical align屬性將失效。採用fl...
Flex布局 彈性布局
1.flex direction flex direction屬性決定主軸的方向 即專案的排列方向 flex direction row row reverse column column reverse 2.flex wrap 預設情況下，專案都排在一條線 又稱 軸線 上。flex wrap屬性定...