## 一、彈性盒模型 彈性盒模型是css3的一種新的布局方式，是一種當前頁面需要適應不同的屏幕大小及設備類型時確保擁有恰當的行為的布局方式。 **要點：** - 主要是針對容器類元素中對子元素的布局上的控制 - 彈性盒模型是由彈性容器與彈性子元素構成 - 對于父級元素之外，子元素以內是正常渲染的，與彈性盒模型無關 ## 二、CSS3 彈性盒子內容 ### 1、基本概念 - 彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成。 - 彈性容器通過設置 display 屬性的值為 flex 或 inline-flex將其定義為彈性容器。 - 彈性容器內包含了一個或多個彈性子元素。 - 彈性子元素通常在彈性盒子內一行顯示。默認情況每個容器只有一行。 ### 2、display:flex 和 display:inline-flex 區別 - flex： 將對象作為彈性伸縮盒顯示 - inline-flex：將對象作為內聯塊級彈性伸縮盒顯示 #### （1）flex ``` .main { background-color: #0f0; display: flex; } .main>div { width: 50px; height: 50px; border: 1px solid #000; } <div class="main"> <div></div> <div></div> <div></div> <div></div> </div> ``` 此時沒有為父元素main設置寬度，默認為100%； #### （2）inline-flex ``` .main { background-color: #0f0; display: inline-flex; } .main>div { width: 50px; height: 50px; border: 1px solid #000; } .main div:nth-child(2) { height: 60px; } <div class="main"> <div></div> <div></div> <div></div> <div></div> </div> ``` 此處雖然沒有給父元素設置寬度，但是父元素默認會根據子元素的寬高去自適應。 ## 三、CSS3 彈性盒子常用屬性 屬性 | 描述 ---|--- flex-direction | 指定彈性容器中子元素排列方式。 flex-wrap | 設置彈性盒子的子元素超出父容器時是否換行。 flex-flow | flex-direction 和 flex-wrap 的簡寫。 align-items | 設置彈性盒子元素在側軸（縱軸）方向上的對齊方式。 align-content | 修改 flex-wrap 屬性的行為，類似 align-items, 但不是設置子元素對齊，而是設置行對齊。 justify-content | 設置彈性盒子元素在主軸（橫軸）方向上的對齊方式。 ### 1、flex-direction 屬性 決定項目的方向。 **注意**：如果元素不是彈性盒對象的元素，則 flex-direction 屬性不起作用。 ``` .flex-container { flex-direction: row | row-reverse | column | column-reverse; } ```  **屬性值** 值 | 描述 ---|--- row | 默認值。元素將水平顯示，正如一個行一樣。 row-reverse | 與 row 相同，但是以相反的順序。 column | 元素將垂直顯示，正如一個列一樣。 column-reverse| 與 column 相同，但是以相反的順序。 ### 2、flex-wrap 屬性 flex-wrap 屬性規定flex容器是單行或者多行，同時橫軸的方向決定了新行堆疊的方向。 值 | 描述 ---|--- nowrap | 默認值。規定元素不拆行或不拆列。 wrap | 規定元素在必要的時候拆行或拆列。 wrap-reverse | 規定元素在必要的時候拆行或拆列，但是以相反的順序。 ``` .flex-container { flex-wrap: nowrap | wrap | wrap-reverse; } ``` 可以取三個值： **（1）nowrap (默認)：不換行**  **（2）wrap：換行，第一行在上方**  **（3）wrap-reverse：換行，第一行在下方**  ### 3. flex-flow 屬性 flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap。 ``` .flex-container { flex-flow: <flex-direction> <flex-wrap> } ``` ### 4、align-items屬性 align-items 屬性定義flex子項在flex容器的當前行的側軸（縱軸）方向上的對齊方式。 ``` .flex-container { align-items: flex-start | flex-end | center | baseline | stretch; } ``` 值 | 描述 ---|--- stretch | 默認值。項目被拉伸以適應容器。 center | 項目位于容器的中心。 flex-start | 項目位于容器的開頭。 flex-end | 項目位于容器的結尾。 baseline | 項目位于容器的基線上。  ### 5、align-content屬性 align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。 ``` .flex-container { align-content: flex-start | flex-end | center | space-between | space-around | stretch; } ``` 值 | 描述 ---|--- flex-start | 與交叉軸的起點對齊。 flex-end | 與交叉軸的終點對齊。 center | 與交叉軸的中點對齊 space-between | 與交叉軸兩端對齊，軸線之間的間隔平均分布。 space-around | 每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。 stretch | （默認值）。軸線占滿整個交叉軸。 。  ### 6、justify-content屬性 justify-content 用于設置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式。 ``` .flex-container { justify-content: flex-start | flex-end | center | space-between | space-around; } ``` 值 | 描述 ---|--- flex-start | 默認值。項目位于容器的開頭。 flex-end | 項目位于容器的結尾。 center | 項目位于容器的中心。 space-between| 項目位于各行之間留有空白的容器內。 space-around | 項目位于各行之前、之間、之后都留有空白的容器內。  ## 四、彈性子元素屬性 屬性 | 描述 ---|--- order | 設置彈性盒子的子元素排列順序。 flex-grow | 設置或檢索彈性盒子元素的擴展比率。 flex-shrink | 指定了 flex 元素的收縮規則。flex 元素僅在默認寬度之和大于容器的時候才會發生收縮，其收縮的大小是依據 flex-shrink 的值。 flex-basis | 用于設置或檢索彈性盒伸縮基準值。 flex | 設置彈性盒子的子元素如何分配空間。 align-self | 在彈性子元素上使用。覆蓋容器的 align-items 屬性。 ### 1、order屬性 ``` .flex-container .flex-item { order: <integer>; } ``` \<integer>：用整數值來定義排列順序，數值小的排在前面。可以為負值，默認為0。  ### 2、flex-grow屬性 ``` .flex-container .flex-item { flex-grow: <integer>; } ``` \<integer>：一個數字，規定項目將相對于其他靈活的項目進行擴展的量。默認值是 0。  ### 3、flex-shrink屬性 ``` .flex-container .flex-item { flex-shrink: <integer>; } ``` \<integer>：一個數字，規定項目將相對于其他靈活的項目進行收縮的量。默認值是 1。  ### 4、flex-basis屬性 ``` .flex-container .flex-item { flex-basis: <integer> | auto; } ``` \<integer>：一個長度單位或者一個百分比，規定元素的初始長度。 auto：默認值。長度等于元素的長度。如果該項目未指定長度，則長度將根據內容決定。 ### 5、flex屬性 flex 屬性用于設置或檢索彈性盒模型對象的子元素如何分配空間。 flex 屬性是 flex-grow、flex-shrink 和 flex-basis 屬性的簡寫屬性。 ``` .flex-container .flex-item { flex: flex-grow flex-shrink flex-basis | auto | initial | inherit; } ``` 值 | 描述 ---|--- flex-grow | 一個數字，規定項目將相對于其他元素進行擴展的量。 flex-shrink | 一個數字，規定項目將相對于其他元素進行收縮的量。 flex-basis | 項目的長度。合法值："auto"、"inherit" 或一個后跟 "%"、"px"、"em" 或任何其他長度單位的數字。 auto | 與 1 1 auto 相同。 none | 與 0 0 auto 相同。 initial | 設置該屬性為它的默認值，即為 0 1 auto。 inherit | 從父元素繼承該屬性。 ### 6、align-self屬性 ``` .flex-container .flex-item { align-self: auto | stretch | center | flex-start | flex-end | baseline | initial | inherit; } ``` 值 | 描述 ---|--- auto | 默認值。元素繼承了它的父容器的 align-items 屬性。如果沒有父容器則為 "stretch"。 stretch | 元素被拉伸以適應容器。 center | 元素位于容器的中心。 flex-start | 元素位于容器的開頭。 flex-end | 元素位于容器的結尾。 baseline | 元素位于容器的基線上。 initial | 設置該屬性為它的默認值。 inherit | 從父元素繼承該屬性。  取值同 align-items。