CSS3彈性伸縮盒的案例分析

這篇“CSS3彈性伸縮盒的案例分析”文章，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要參考一下，對于“CSS3彈性伸縮盒的案例分析”，小編整理了以下知識點，請大家跟著小編的步伐一步一步的慢慢理解，接下來就讓我們進入主題吧。

用途

• 彈性盒子對于前端web網(wǎng)頁布局來說，有著舉足輕重的作用，移動端也是如此。掌握了彈性盒子用法，對于目前編寫自適應(yīng)頁面很重要。掌握這種布局規(guī)則，是一項必備技能。
   

彈性伸縮盒模型說明

• 主軸（main axis） 是沿著 flex 元素放置的方向延伸的軸（比如頁面上的橫向的行、縱向的列）。該軸的開始和結(jié)束被稱為 main start 和 main end**。

• 交叉軸（cross axis） 是垂直于 flex 元素放置方向的軸。該軸的開始和結(jié)束被稱為 cross start 和 cross end**。

• 設(shè)置了 display: flex 的父元素（在本例中是 <section> ）被稱之為 *flex 容器（flex container）。

• 在 flex 容器中表現(xiàn)為柔性的盒子的元素被稱之為 flex 項 （ flex item ）
   

常用的屬性

flex-direction（指定彈性容器中子元素排列方式）

   row 默認值。元素將水平顯示，正如一個行一樣。
   row-reverse 以相反的順序。
   column 元素將垂直顯示，正如一個列一樣。
   column-reverse 與 column 相同，但是以相反的順序。

flex-wrap （屬性規(guī)定flex容器是單行或者多行，同時橫軸的方向決定了新行堆疊的方向。）

  nowrap默認值。規(guī)定元素不拆行或不拆列。
  wrap規(guī)定元素在必要的時候拆行或拆列。
  wrap-reverse規(guī)定元素在必要的時候拆行或拆列，但是以相反的順  序。

align-items 屬性定義flex子項在flex容器的當(dāng)前行縱軸方向上的對齊方式，就是規(guī)定上下排行的樣式。

   stretch 默認值。項目被拉伸以適應(yīng)容器。
   center 項目位于容器的中心。
   flex-start 項目位于容器的開頭。
   flex-end 項目位于容器的結(jié)尾。
   baseline 項目位于容器的基線上。

justify-content 用于設(shè)置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式。

  flex-start 項目位于容器的開頭。
  flex-end 項目位于容器的結(jié)尾。
  center 項目位于容器的中心。
  space-between 項目位于各行之間留有空白的容器內(nèi)。
  space-around 項目位于各行之前、之間、之后都留有空白的容器內(nèi)。

彈性子元素屬性

1.order屬性

.flex-container .flex-item { order: <integer>; }

<integer>：用整數(shù)值來定義排列順序，數(shù)值小的排在前面。可以為負值，默認為0。

2.align-self設(shè)置或檢索彈性盒子元素自身在側(cè)軸（縱軸）方向上的對齊方式。(跟那個align-items類似)

以上是“CSS3彈性伸縮盒的案例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！