国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

前端基本功-響應式布局(flex)

xuexiangjys / 1519人閱讀

摘要:屬性定義了多根軸線的對齊方式。負值對該屬性無效。屬性允許單個項目有與其他項目不一樣的對齊方式,可覆蓋屬性。默認值為,表示繼承父元素的屬性,如果沒有父元素,則等同于。

本文主要記錄一些自己遇見的flex布局案例

簡單回顧一下flex常用屬性

6個常用的容器屬性

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式,默認值為row nowrap。

flex-direction屬性決定主軸的方向(即項目的排列方向)

flex-wrap默認情況下,項目都排在一條線(又稱"軸線")上。flex-wrap屬性定義,如果一條軸線排不下,如何換行。

justify-content屬性定義了項目在主軸上的對齊方式。

align-items屬性定義項目在交叉軸上如何對齊。

align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線,該屬性不起作用

6個常用的元素屬性

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫,默認值為0 1 auto。后兩個屬性可選。(如果所有項目的flex-grow屬性都為1,則它們將等分剩余空間(如果有的話)。如果一個項目的flex-grow屬性為2,其他項目都為1,則前者占據的剩余空間將比其他項多一倍。)flex:1 等價于 flex-grow: 1

flex-grow屬性定義項目的放大比例,默認為0,即如果存在剩余空間,也不放大。

flex-shrink屬性定義了項目的縮小比例,默認為1,即如果空間不足,該項目將縮小。(如果所有項目的flex-shrink屬性都為1,當空間不足時,都將等比例縮小。如果一個項目的flex-shrink屬性為0,其他項目都為1,則空間不足時,前者不縮小。負值對該屬性無效。)

flex-basis屬性定義了在分配多余空間之前,項目占據的主軸空間(main size)。瀏覽器根據這個屬性,計算主軸是否有多余空間。它的默認值為auto,即項目的本來大小。(它可以設為跟width或height屬性一樣的值(比如350px),則項目將占據固定空間。)

order屬性定義項目的排列順序。數值越小,排列越靠前,默認為0。

align-self屬性允許單個項目有與其他項目不一樣的對齊方式,可覆蓋align-items屬性。默認值為auto,表示繼承父元素的align-items屬性,如果沒有父元素,則等同于stretch。

關于更詳細的基礎知識,放幾個我收藏的鏈接吧

Flex-彈性布局原來如此簡單!

30 分鐘學會 Flex 布局

演示:Flexbox演示站

1.上中下布局,中間自適應

  
header:height = 100px
conent:height = auto
footer:height = 100px
.flexContainer{
    display: flex;
    height: 100%; //要指定高度
    flex-direction: column; //布局從上到下排列
}    
.header,.footer{
    font-size: 18px;
    display: flex; // 這是是為居中 文字的 
    justify-content: center; // 文字 水平居中
    align-items: center;  // 文字垂直居中
}    
.header{
    height: 100px;
    background: #665aa4;
}    
.main{
    flex-grow: 1; // 不知道和 flex: 1 有啥區別
    text-align: center;
    background: #3dc95d;
}    
.footer{
    height: 100px;
    background: #fc430b;
}    
2.實現多個元素寬度平分父級,且可配置一行最多展示多少個元素
conent:height = auto
1
2
3
4
5
6
7
//styl,我就不給大家手動轉成css了
.main
  flex 1
  text-align: center
  background: #3dc95d
  .main-body
    display: flex  //關鍵
    flex-wrap: wrap //關鍵
    .main-item
      flex-grow:1 //關鍵  基礎知識介紹過了 再來一邊 定義元素的放大比例,默認為0,即如果存在剩余空間,也不放大。
      min-width: 30% //關鍵  width: 30%跟flex-basis:30%;(flex: 0 0 30%)作用是相同的,我是這么理解
      max-width: 100% //關鍵  min-width 和  max-width 只是讓元素變得更響應而已
      margin: 15px
      height: 30px
      border: 1px red solid
      background: #ccc
      text-align: center

完全響應式的,你可以改變游覽器窗口的寬度,也可以改變.main-item個數

思路來源:記工作中遇到一件...

3.圣杯布局
conent:height = auto
header:height = 100px
footer:height = 100px
.flexContainer{
  display:flex;
  height:100vh;
}
.footer{
  width:50px;
  background #CCC
}
.main{
  flex-grow:1;
  background #3dc95d
}
.header{
  width 150px;
  background #665aa4
  order:-1;//使得order處于最左側(html中main寫在了最前,以利于優先加載主內容區)
}

4.每行間距均勻分配,并自動換行的列表項
1
2
3
4
5
6
.container{
    display: flex;
    justify-content: space-around; //使主軸方向的多余空間平均分配在兩兩item之間
    flex-wrap: wrap; // 子元素每行填滿時會自動換行
}
.item{
    width: 30%;  //(絕大多數情況)同 flex: 0 0 30%;
    min-width: 400px; // 每一個子元素最小寬度
    max-width: 420px; // 每一個子元素最大寬度
    min-height: 360px;
}    

在使用了justify-content:space-aroundjustify-content: center 或者 justify-content: space-between后有個問題,看最后一張圖最后一排,我想讓它按著順序排怎么辦

解決方法一

// 在列表結尾增加一系列空標簽,
// 數量我覺得最好是 一行最大容量 - 1
// 因為這子元素個數可能是不確定的

//在css里做如下定義: //根據自己實際情況,有時候可以不添加布局上也不會有影響 .item:empty { height: 0; min-height: 0px; // 當然要記得把這些元素重置 border: none; // 這些 padding: 0....... } // 當然你也可以不用 .item這個類名,隨便換一個 //.fix { // width: 30.333333%; // height:0; // margin: 0; //}

缺點就是加了額外空標簽

效果還算滿足要求

解決方法二:

.container{
  display: flex;
  flex-wrap: wrap;
  background: red;
}
.item{
  box-sizing: border-box; 
  width: 30.333333%;
  margin: 10px 1.5%;
  background:#eee;
  height: 120px;
}

這種方法也能實現響應式,但是如果你.item的子元素的寬度不能小于或大與某個固定寬度,換句話說就是設置min-widthmax-width就會出現不能均勻沾滿一行的情況

這是目前我知道的兩種好用的方法,根據自己的實際情況選擇吧,如果你有idea歡迎留言討論

5.每個區塊之間用豎線分割,如圖



電壓等級分布
行業分類分布
電源數量分布
// stylus
.pieItem
  width: 33.333%
  min-width: 400px
  max-width: 50%
  box-sizing: border-box
  .pieDiv
    height: 360px
  &:not(:nth-child(3n))
    .pieDiv::after
      content: ""
      width: 1px
      position: absolute
      height: 360px
      top 50%
      right 0
      transform: translate(0, -50%)
      background: #ccc
      background: -webkit-gradient(radial, 0 180, 0, 0 180, 180, from(#ffffd), to(rgba(0,0,0,0)))

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

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

相關文章

  • HTML-CSS

    摘要:但是,從字體上來說雪碧圖制作,使用以及相關,圖文。由于采用了編譯,所以能夠保證在瀏覽器不支持標準布局的情況下,回滾到舊版本的,保證移動設備中能呈現出一樣的布局效果。我不想陷入和的紛爭,但是有一件事是確定的極大的提升了移動端 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個問題:怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候,看到 ...

    xiaokai 評論0 收藏0
  • HTML-CSS

    摘要:但是,從字體上來說雪碧圖制作,使用以及相關,圖文。由于采用了編譯,所以能夠保證在瀏覽器不支持標準布局的情況下,回滾到舊版本的,保證移動設備中能呈現出一樣的布局效果。我不想陷入和的紛爭,但是有一件事是確定的極大的提升了移動端 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個問題:怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候,看到 ...

    CHENGKANG 評論0 收藏0
  • CSS及布局

    摘要:經過半年的打磨,正式發布,主要是新增了一些常用組件,并使用命名,為接下來的微信小程序開發做好準備。這兩種方式實現的瀑布流式布局均支持首屏和網頁窗口大小改變時的列數自適應。主要是對于標準里的布局方式草案中的布局方式進行一些總結。 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個問題:怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候,看...

    jaysun 評論0 收藏0
  • Flexbox響應網頁布局 - W3Schools視頻02

    摘要:今日繼續響應式網頁布局的實現,采用方案。有經驗的前端或多或少已經接觸過這個網站,因為它經常出現在搜索結果的前幾項。因此我想做一系列的影片專門介紹這些。 今日繼續W3Schools響應式網頁布局的實現,采用Flexbox方案。使用Flexbox實現響應式網頁布局是目前最流行的做法。如果你對Flexbox并不熟悉,可以查看W3Schools的教學: W3Schools Flexbox教學...

    codecraft 評論0 收藏0

發表評論

0條評論

xuexiangjys

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<