/*y豎向x橫向*/
/*元素的排列方向*/
/*flex-direction: row;預設樣式，從左到右排列*/
/*flex-direction: row-reverse;從右到左排列
/*flex-direction: column;從下到上排列*/
/*flex-direction: column-reverse;從下到上排列*/
/*設定是否允許專案多行排列,以及多行排列是換行的方向*/
/*flex-wrap: nowrap;預設,不換行,如果單行內容過多,將會溢位*/
/*flex-wrap: wrap;單行放不下,將會自動換行*/
/*flex-wrap: wrap-reverse;反向,自動換行*/
/*設定專案在主軸方向上對齊方式,以及分配專案之間及其周圍多餘的空間（y豎向x橫向）*/
/*justify-content: flex-start;專案對齊主軸起點,專案間不會有間隙*/
/*justify-content:center;主軸上居中*/
/*justify-content: flex-end;左對齊,專案不留間隙*/
/*justify-content: space-between;專案之間間隙一樣,第一和第二全部貼邊*/
/*justify-content: space-around;和上乙個類似,根據中間的乙個調整間隙*/
/*justify-content: space-evenly;第一和最後乙個都會和邊上有間距*/
/*元素在交叉軸的對齊方式*/
/*align-items: stretch;預設,如果沒有設定尺寸,專案將會自動拉伸填滿容器*/
/*align-items: flex-start;專案頂部與行起點對齊*/
/*align-items: center;專案在行中居中對齊*/
/*align-items: flex-end;專案底部與行起點對齊*/
/*align-items: baseline;專案第一行文字的基線對齊,以子元素的第一行文字對齊*/
/*多行元素在交叉軸的對齊方式*/
/*align-content: stretch;預設值,如果沒有設定尺寸,將會自動拉伸填滿*/
/*align-content: flex-start;首行在交叉軸起點開始排列,行間不留間距*/
/*align-content: center;行在交叉軸中點排列，行間不留間距，首行離交叉軸起點和尾行離交叉軸終點距離相等*/
/*align-content: flex-end;尾航再交叉軸終點開始排列，行間不留間距*/
/*align-content: space-between;行與行間距相等,首行離交叉軸起點和尾航交叉軸終點距離為0*/
/*align-content: space-around;行與行間距相等，首行離交叉軸起點和尾行離交叉軸終點距離為行與行間間距的一半*/
/*align-content: evenly;行間間距、以及首行離交叉軸起點和尾行離交叉軸終點距離相等*/
Flex 布局 容器屬性
flex 布局，意為 彈性布局 任何乙個容器都可以指定為 flex 布局，行內元素也可以使用 flex 布局。注意 設為 flex 布局後，子元素的 float clear 和 vertrical align 屬性都將失效。採用 flex 布局的元素，稱為 flex 容器，簡稱容器 它的所有子元素自...
flex布局基礎入門總結 容器屬性）
div flex 將物件作為彈性伸縮盒顯示，inline flex 將物件作為內聯塊級彈性伸縮盒顯示 寬度撐開 div row 預設值 主軸為水平方向，起點在左端 row reverse 主軸為水平方向，起點在右端 column 主軸為垂直方向，起點在上沿 column reverse 主軸為垂直方...
關於flex布局容器屬性
容器屬性 flex direction 決定主軸的方向 row 從下到上 row reverse 從上到下 column 從左到右 column reverse 從右到左 flex wrap 如果一行排列不下如何換行 nowrap 不換行 wrap 換行 wrap reverse 換行，第一行在下面...