flex佈局

1.flex佈局基本概念

使用flex佈局首先要給父容器設置 display:flex;,而後再設置justify-content:center（實現水平居中），最後在設置align-items:center（實現垂直居中）

1.1設置父容器

①設置子容器沿主軸（水平方向）排列：justif-content

第一種：默認不寫（起始端對齊）

 

 

第二種：justify-content:flex-start;（起始端對齊）與第一種效果同樣

 

第三種：justify-content:center;（居中對齊）

 

第四種：justify-content:flex-end;（末尾端對齊）

第五種：justify-content:space-around（位於首尾兩端的子容器到父容器的間距是子容器之間的間距的一半）

左間距+右間距=兩個子容器間距之和的一半

 

第六種：justify-content:space-between（左右兩端相接，中間均勻分佈）

 

②設置子容器沿交叉軸（垂直方向）排列：align-items:

第一種：默認不寫（頂部對齊）

第二種:align-items:flex-start（頂部對齊）

第三種：align-items:center（垂直居中）

第四種：align-items:flex-end（底部對齊）

第五種：algin-items:baseline（按照每一個子容器的baseline（這裏是首行文字）對齊）

第六種：align-items:stretch（子容器按交叉軸（垂直）方向拉伸到與父容器一致，前提是沒有給子容器設置高度）

1.2設置子容器

①在主軸方向上伸縮

子容器是有彈性的（flex即彈性），它們會自動填充剩餘空間，子容器的伸縮比例由flex的值來肯定

經過給子容器設定flex的值（如一、二、3）也能夠是有單位數字（如200px、90px、350px），還能夠是關鍵字none

子容器會按flex定義的尺寸來自動伸縮，若是取none則不伸縮

②單獨給子容器設置如何沿交叉排列:align-self

沿頂部：

沿底部

居中

 

2.軸

如圖所示，軸分爲主軸和交叉軸

flex-direction屬性決定了主軸的方向

flex-direction:row（橫向）若是是row-resreve（表示反轉，交換一、2的位置）

flex-driection:column（縱向），column-reserve與上相似

更多：https://juejin.im/post/58e3a5a0a0bb9f0069fc16bb#heading-4