說說彈性布局

learn_shifeng 發布于2019-08-30 11:07 / 868人閱讀

摘要：占滿交叉軸上所有的空間使用容器定義的的值以上就是我對彈性布局的一些知識點總結，如有異議，煩請告知，謝謝不努力就淘汰

彈性布局

彈性布局，是一種布局方式
主要解決某個元素中子元素的布局方式
它為布局提供了強大的靈活性

概念和語法

基本設置

display: flex;    // 將塊級元素設置為容器
display: inline-flex    // 將行內元素設置為容器

這里出現了容器這個詞，在彈性布局中有容器和項目的說法

容器：要發生(設置)彈性布局的子元素，的**父元素**稱為容器
項目：要做彈性布局的**子元素們**，稱之為項目

彈性布局中也有主軸和交叉軸的概念

項目們排列方向的一條軸(類似坐標軸中的x、y軸),就稱為主軸
和這條主軸垂直相交的軸，就稱為交叉軸
默認主軸方向是橫向排列，即主軸 -> x軸

特點

當元素設置成彈性容器后，它的所有子元素變成彈性項目
此時項目的float/clear/vertical-align屬性會失效

容器中的屬性

設置主軸方向

   flex-direction:
   取值：row，默認值，主軸是x軸，主軸起點是左端
   row-reverse,  主軸是x軸，主軸起點是右端
   column，主軸是y軸，主軸起點在頂部
   column-reverse,主軸是y軸，主軸起點在底部

設置項目的換行顯示

   flex-wrap:
   取值：nowrap 默認值，空間不夠時，也不換行，項目自動縮小
   wrap 空間不夠就換行
   wrap-reverse 換行，并反轉

上面兩項屬性可以縮寫成

   flex-flow:

定義項目在主軸上的對齊方式

   justify-content:
   取值：flex-start,默認值，以主軸起點對齊
   flex-end，以主軸終點對齊
   center  在主軸上居中對齊
   space-between 兩端對齊，兩端無空白
   space-around 每個間距大小相同，兩邊會留白

定義項目在交叉軸上的對齊方式

   align-items:
   取值：flex-start 交叉軸起點對齊
   flex-end 交叉軸終點對齊
   center 交叉軸居中對齊
   baseline 交叉軸基線對齊，就是交叉軸起點
   stretch 前提，項目不寫高。占滿交叉軸上所有的空間

項目中的屬性

只能設置在其中一個項目上，不會影響其他項目的效果

order

   定義項目排列順序，值越小，越靠近起點，默認值為0
   取值：無單位的整數

flex-grow

   定義項目的放大比例
   如果容器有足夠大的剩余空間，項目將按比例放大
   取值：無單位整數，默認值0，不放大

flex-shrink

   定義項目縮小的比例，容器空間不足時，項目該如何縮小
   取值：無單位整數，默認值為1。
   取值為0，不縮小。取值越大，縮小越快。

flex-basis

   主軸存在剩余空間時，分配給此項目多少空間，默認auto即本身寬度
   類似height和width寫法

以上三個屬性可以縮寫為

   flex:
   默認值是 0 1 auto
   常用寫法 flex:1 -> 1 1 auto
   利用這個可以方便的實現**圣杯布局**
   轉載一個自認為不錯的實現方法[css圣杯布局的實現][1]

align-self

  定義當前項目在交叉軸上的對齊方式
  這個屬性會覆蓋掉容器設置的align-items屬性
  取值：flex-start 交叉軸起點對齊
  flex-end 交叉軸終點對齊
  center 交叉軸居中對齊
  baseline 交叉軸基線對齊，就是交叉軸起點
  stretch 前提，項目不寫高。占滿交叉軸上所有的空間
  auto 使用容器定義的align-items的值

以上就是我對彈性布局的一些知識點總結，如有異議，煩請告知，謝謝

不努力
就淘汰

GPU云服務器云服務器說說發表說說刷評論說說軟件說說java流

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114780.html

CSS系列——瀏覽器默認樣式

摘要：了解標簽在各瀏覽器當中的默認樣式，可以讓我們了解，為什么會要寫，當中要怎么寫樣式最合理。了解HTML標簽在各瀏覽器當中的默認樣式，可以讓我們了解，為什么會要寫Reset.css，Reset.css當中要怎么寫樣式最合理。試著思考下面的問題：為什么會有默認樣式？每個瀏覽器的默認樣式有什么不同？ Reset.css具體怎么寫，每個瀏覽器展示的效果才會一致？默認樣式這里說的默認...

lewinlee 2019-08-30 15:53 評論0 收藏0
前端面試題大集合：來自真實大廠的532道面試題(只有題，沒有答案)

答案自己谷歌或百度找。一、來源背景面試題是來自微博@牛客網發布的真實大廠前端面經題目，我一直在收集題目長期一個一個的記錄下來的，可能會有重復，但基本前端的面試大綱和需要掌握的知識都在其中了，面試題僅做學習參考，學習者閱后也要用心鉆研其中的原理，重要知識需要系統學習、透徹學習，形成自己的知識鏈。二、532道前端真實大廠面試題 express和koa的對比，兩者中間件的原理，koa捕獲異常多種情...

Kerr1Gan 2019-08-26 12:20 評論0 收藏0
前端面試題大集合：來自真實大廠的532道面試題(只有題，沒有答案)

答案自己谷歌或百度找。一、來源背景面試題是來自微博@牛客網發布的真實大廠前端面經題目，我一直在收集題目長期一個一個的記錄下來的，可能會有重復，但基本前端的面試大綱和需要掌握的知識都在其中了，面試題僅做學習參考，學習者閱后也要用心鉆研其中的原理，重要知識需要系統學習、透徹學習，形成自己的知識鏈。二、532道前端真實大廠面試題 express和koa的對比，兩者中間件的原理，koa捕獲異常多種情...

lushan 2019-08-02 11:34 評論0 收藏0