Flex彈性盒子優雅佈局

Flex簡介

在flex佈局之前,我們想要爲頁面做一個有優雅的兩欄或者三欄佈局需要大費周折的使用浮動或者定位來實現,如今我們可以快速方便是使用flex彈性盒子來實現

• Flex 是 Flexible Box 的縮寫，意爲"彈性佈局"，用來爲盒狀模型提供最大的靈活性。塊級元素使用display: flex; 行內元素使用inline-flex,容器使用Flex佈局後，子元素的float、clear和verticle-align屬性將失效

基本概念

• 當前元素設置display: flex;或者inline-flex,該盒子稱爲flex container容器,簡稱"容器"
• 當前元素的所有子元素自動成爲容器成員,成爲Flex項目(flex item），簡稱"項目"。
• 容器默認分爲兩根軸:水平的主軸和垂直的交叉軸,主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。項目默認沿主軸排列。單個項目佔據的主軸空間叫做main size，佔據的交叉軸空間叫做cross size。

用在項目上的6個屬性

• flex-grow:放大比例
• flex-shrink:縮小比例
• flex-basis:伸縮基準值
• flex:是flex-grow, flex -shrink和flex -basis的簡寫
• order:排列順序
• align-self :單個項目對齊方式

1. flex-grow

定義flex-item在主軸上的放大比例, 默認值爲0：即使存在剩餘空間（寬度），也不放大。

• 根據所設置的比例分配盒子所剩餘的空間
• 拓展:左右兩欄佈局默認值O;
• 如果所有flex-item的flex-grow屬性值都是1，表示它們均分剩餘空間（如果有）

2. flex-shrink

定義flex-item在主軸上的縮小比例。默認值爲1，即如果空間不足，該flex-item會縮小。

• 置元素的收縮比例一多出盒子的部分，按照比例的大小砍掉相應的大小，即比例越大，被砍的越大，默認值1;
• 如果所有flex-item的flex-shrink屬性值都爲1，在空間不足時，都將等比例縮小
• flex-shrink爲0的flex-item在空間不足時，不會縮小。

3. flex-basis

伸縮基準值.項目佔據主軸的空間,默認值爲auto，表示flex-item本來的大小。

• 瀏覽器根據這個屬性計算是否存在多餘空間
• 如果width和height值固定爲絕對長度單位（如350px），該flex-item佔據固定空間

4. flex

是flex-grow、flex-shrink和flex-basis三個屬性的簡寫，默認值爲0 1 auto

• 兩個快捷值：none表示(0 0 auto)；auto表示(1 1 auto)
• 建議優先使用屬性值，而非先單獨寫三個分離的屬性（瀏覽器會自動推算相關值）

5. order

屬性定義項目的排列順序。數值越小，排列越靠前，默認爲0。

6. align-self

允許單個flex-item與其他flex-item在交叉軸有不同的對齊方式，可以覆蓋掉align-items的值

• align-items: auto| flex-start | flex-end | center | baseline | strecth
• 默認值爲auto：表示繼承父元素的align-items屬性
• baseline 按照基準線對齊
• 沒有父元素情況下等同於stretch

設置容器上的6個屬性 12241.25

• flex-direction 決定主軸的方向
• flex-wrap 是否換行
• flex-flow flex-direction和flex-wrap的簡寫
• justify-content 項目在主軸上的對齊方式
• align-items 在側軸上的對齊方式
• align-content 多根軸線的對齊方式

1. flex-direction

決定主軸的方向,即項目的排列方向

• flex-direction：row | row-reverse | column | column-reverse
• row(默認值) 主軸爲水平方向,起點在左端
• row-reverse 主軸爲水平方向,起點在右端
• column 主軸在垂直方向,起點在上端
• column-reverse 主軸在垂直方向,起點在下端

2. flex-wrap

默認情況下，項目都排在一條線(又稱"軸線")上,flex-wrap屬性定義,如果一條軸線排不下,如何換行

• flex-wrap：nowrap | wrap | wrap-reverse
• nowrap(默認):不換行
  *wrap:換杭,第一行在上方
• wrap-reverse:換行,第一行在下方

3. flex-flow

是flex-direction和flex-wrap的簡寫，默認值爲row nowrap

flex-flow: &&

4. justify-content

屬性定義了項目在主軸上的對齊方式。

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

• flex-start（默認值）：左對齊
• flex-end：右對齊
• center： 居中
• space-between：兩端對齊，項目之間的間隔都相等。
• space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。

5. align-items

屬性定義項目在交叉軸上如何對齊。

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

• flex-start：交叉軸的起點對齊。
• flex-end：交叉軸的終點對齊。
• center：交叉軸的中點對齊。
• baseline: 項目的第一行文字的基線對齊。
• stretch（默認值）：如果項目未設置高度或設爲auto，將佔滿整個容器的高度。

6. align-content

定義了多根軸線的對齊方式。如果項目只有一根主線,該屬性不起作用

• align-content: flex-start | flex-end | center | space-between | space-around | stretch
• stretch（默認值）：軸線沾滿整個交叉軸
• space-between：與交叉軸兩端對齊，軸線間的間隔平均分佈
• space-around：每根軸線兩側的間隔相等
• flex-start：與交叉軸起點對齊

flex水平垂直居中:

.container{
            margin: 30px;
            height: 100%;
            width:100%;
            background: lightblue;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        p{
           
            background: red;
        }

必備知識點:css居中,你還沒有記住嗎?