這篇“CSS3彈性伸縮盒的案例分析”文章，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要參考一下，對(duì)于“CSS3彈性伸縮盒的案例分析”，小編整理了以下知識(shí)點(diǎn)，請(qǐng)大家跟著小編的步伐一步一步的慢慢理解，接下來就讓我們進(jìn)入主題吧。
用途
彈性盒子對(duì)于前端web網(wǎng)頁布局來說，有著舉足輕重的作用，移動(dòng)端也是如此。掌握了彈性盒子用法，對(duì)于目前編寫自適應(yīng)頁面很重要。掌握這種布局規(guī)則，是一項(xiàng)必備技能。
彈性伸縮盒模型說明
主軸（main axis） 是沿著 flex 元素放置的方向延伸的軸（比如頁面上的橫向的行、縱向的列）。該軸的開始和結(jié)束被稱為 main start 和 main end**。
交叉軸（cross axis） 是垂直于 flex 元素放置方向的軸。該軸的開始和結(jié)束被稱為 cross start 和 cross end**。
設(shè)置了 display: flex 的父元素（在本例中是
在 flex 容器中表現(xiàn)為柔性的盒子的元素被稱之為 flex 項(xiàng) （ flex item ）
常用的屬性
flex-direction（指定彈性容器中子元素排列方式）
row 默認(rèn)值。元素將水平顯示，正如一個(gè)行一樣。 row-reverse 以相反的順序。 column 元素將垂直顯示，正如一個(gè)列一樣。 column-reverse 與 column 相同，但是以相反的順序。
flex-wrap （屬性規(guī)定flex容器是單行或者多行，同時(shí)橫軸的方向決定了新行堆疊的方向。）
nowrap默認(rèn)值。規(guī)定元素不拆行或不拆列。 wrap規(guī)定元素在必要的時(shí)候拆行或拆列。 wrap-reverse規(guī)定元素在必要的時(shí)候拆行或拆列，但是以相反的順 序。
align-items 屬性定義flex子項(xiàng)在flex容器的當(dāng)前行縱軸方向上的對(duì)齊方式，就是規(guī)定上下排行的樣式。
stretch 默認(rèn)值。項(xiàng)目被拉伸以適應(yīng)容器。 center 項(xiàng)目位于容器的中心。 flex-start 項(xiàng)目位于容器的開頭。 flex-end 項(xiàng)目位于容器的結(jié)尾。 baseline 項(xiàng)目位于容器的基線上。
justify-content 用于設(shè)置或檢索彈性盒子元素在主軸（橫軸）方向上的對(duì)齊方式。
flex-start 項(xiàng)目位于容器的開頭。 flex-end 項(xiàng)目位于容器的結(jié)尾。 center 項(xiàng)目位于容器的中心。 space-between 項(xiàng)目位于各行之間留有空白的容器內(nèi)。 space-around 項(xiàng)目位于各行之前、之間、之后都留有空白的容器內(nèi)。
彈性子元素屬性
1.order屬性
重慶分公司
重慶分公司
.flex-container .flex-item { order: ; } 2.align-self設(shè)置或檢索彈性盒子元素自身在側(cè)軸（縱軸）方向上的對(duì)齊方式。(跟那個(gè)align-items類似)
以上是“CSS3彈性伸縮盒的案例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
