久久精品中文字幕av,av.涩涩涩涩涩涩涩涩,亚洲国产日韩欧美精品成人久久久,成人福利电影免费在线观看,日产国产原创av,日韩av午夜激情,bt天堂中文字幕,超级碰人妻在线视频,欧美老熟妇久久一区二区

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