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

資訊專欄INFORMATION COLUMN

重溫 Flex 布局

binta / 1505人閱讀

摘要:而通過實現則簡單多了源碼原因解釋中間一欄為核心,所以需要優先渲染,結構也就放在了前面,主要是使用屬性將放置到前方。源碼的列數每列的個數函數原因解釋實現瀑布流還是比較簡單的。

介紹

這是關于 Flex 布局的實踐,原想還水一點字數來介紹 Flex 相關屬性,想想還是算了,阮一峰大佬的兩篇文章推上:

Flex 布局教程:語法篇

Flex 布局教程:實例篇

如何用 CSS 來增進對 Flex 的理解:

CSS 搞事技巧:checkbox+label+selector

CSS 搞事技巧:hover+active

常規布局 1. 兩欄布局

左側定寬,右側自適應:

源碼


  
left
right
.flex-layout
  display flex
.flex__item
  &:nth-child(1)
    background-color #c04851 // 玉紅
    flex 0 0 200px
  &:nth-child(2)
    background-color #440e25 // 古銅紫
    flex 1 1 auto 

原因解釋:

flex 是一個簡寫屬性,用來設置 flex-growflex-shrinkflex-basis。一般來說讓元素等高需要額外設置,而 flex 容器的存在一個默認屬性值:align-items:stretch,它會幫助你,當然也會給你帶來糟糕的體驗。

2. 三欄布局

圣杯布局與雙飛翼布局都是三欄布局,稍微介紹一下:圣杯布局關鍵是父元素設置 padding,接著子元素通過 margin 負值以及定位;雙飛翼布局關鍵是中間一欄多了子元素并設置 margin,然后側邊欄使用 margin 負值。而通過 flex 實現則簡單多了:

源碼


  
content
nav
side
.holy-grail
  display flex
  .flex__content
    flex 1 1 auto
    background-color #009999
  .flex__nav, .flex__side
    flex 0 0 120px
  .flex__nav
    order -1
    background-color #1D7373
  .flex__side
    background-color #33CCCC

原因解釋:

中間一欄為核心,所以需要優先渲染,DOM 結構也就放在了前面,主要是使用 order 屬性將 nav 放置到前方。

常見布局

除了整體結構用到這些布局以外,對于一些組件也常常需要一些簡單的布局。

1. 導航欄

模仿示例:

實現效果圖:

源碼

Title
.header
  height 100px
  width 100%
  background-color #f9f1db // 蚌肉白
  display flex
  align-items center
  > *
    margin 0 10px
  &__avatar, &__more
    flex 0 0 80px
    height 80px
    border-radius 50%
  &__avatar
    background-color #FFAC40
  &__title
    color #FF9000
  &__more
    margin-left auto
    background-color #A65E00

原因解釋:

此處主要是利用了 margin-auto 來占據剩余的空間,就與我們使用 margin: 0 auto 來獲取水平居中一樣。

2. 輸入框

模仿示例:

實現效果圖:

源碼


  
Message
.input-group
  flex 0 0 75%
  height 40px
  border 2px solid red
  border-radius 4px
  display flex
  align-items center
  > *
    box-sizing border-box
  .input-text
    font-size 20px
    padding-left 10px
    height 100%
    flex 1
    outline none 
    border none 
  .icon
    flex 0 0 24px
    height 24px
    border-radius 50%
    background-color #648e93 // 晚波藍

原因解釋:

這也是一個常規的三欄布局,關鍵是 .input-textflex: 1 屬性可以占據剩余空間,當其余配件不存在時也可以相應的擴張。

3. 卡片

實現效果圖:

源碼


  
1
2
3
4
5
6
.flex-card
  display flex
  flex-flow column nowrap
  .header
    flex-basis 80px
    background-color #4E51D8
  .footer
    flex-basis 50px
    background-color #00B060
  .article
    flex auto 
    background-color #FF9000
    display flex
    flex-flow row wrap
    align-content center
    justify-content space-around
    &__item
      width 28%
      height 50px
      box-shadow 0 2px 4px rgba(255, 255, 255, .4), 3px 0 5px rgba(0, 0, 0, .6)

原因解釋:

將主軸修改為垂直方向,headerfooter 因為 articleflex:auto 屬性被分別頂至上方和下方,可以避免 absolute 的濫用。在中間使用 align-content 區別于 align-items ,可以將多行元素視為一個整體。

4. 瀑布流

實體效果:

在編譯時會賦予 CSS 顏色,所以直接刷新頁面是不可行的,只有重新保存代碼進行編譯可以變更顏色。

源碼


  
$flow-columns = 5; // flow 的列數
$flow-items = 8; // flow 每列的個數

// 函數
randomColor(min, max) {
  return floor(math(0, "random") * (max - min + 1) + min);
}

randomPx(min, max) {
  return floor(math(0, "random") * (max - min + 1) + min) px;
}

.flex-flow {
  display: flex;
  justify-content: space-between;
  overflow: hidden;

  .flow-column {
    display: flex;
    flex-direction: column;
    flex: 0 0 18.6%;

    .flow-item {
      width: 100%;
      margin: .1rem 0;
    }
  }
}

for column in (1 .. $flow-columns) {
  .flow-column:nth-child({column}) {

    for item in (1 .. $flow-items) {
      .flow-item:nth-child({item}) {
        flex: 0 0 randomPx(30, 100);
        background-color: rgb(
          randomColor(0, 255),
          randomColor(0, 255),
          randomColor(0, 255)
        );
      }
    }
  }
}

原因解釋:

flex 實現瀑布流還是比較簡單的。友情提示:當使用 stylus 時還是加上標點符號吧,找編譯錯誤花了我近二十分鐘。

最后 合并多個 commit

在 push 前需要合并 commit:

git log --oneline
git rebase -i xxxxxxx
git log --oneline
git status 
git push

初步地把 CSS 稍微過了一遍,下一步繼續完善那個簡陋的 簡歷 了…

參考資料

VSCode 的友情提示

Vuetify

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

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

相關文章

  • CSS 搞事技巧:checkbox+label+selector

    摘要:列出這個兩個屬性的常用值看可知已經增加了更多的值代碼解讀該項目是通過來渲染的,所以會使用到的語法,不過此處僅使用的循環來解決重復書寫的問題該效果參考來源。接著使用布局來將它們分割,因為這次主要將的不是,所以就不進行闡述了。 介紹 其實這篇文章寫到一大半時它的名字還叫做 《重溫 Flex 布局》,結果寫著寫著就走了心,附上一圖表示心情吧: showImg(https://segmentf...

    alphahans 評論0 收藏0
  • 重溫"什么是響應式網頁設計?響應式布局的實現原理"

    摘要:概念響應式網頁設計最初是由提出的一個概念為什么一定要為每個用戶群各自打造一套設計和開發方案設計應該做到根據不同設備環境自動響應及調整。預計到年,移動互聯網的數據流量將超越端的流量。 概念 響應式網頁設計最初是由 Ethan Marcotte 提出的一個概念:為什么一定要為每個用戶群各自打造一套設計和開發方案?Web設計應該做到根據不同設備環境自動響應及調整。當然響應式Web設計不僅僅是...

    Nekron 評論0 收藏0
  • 重溫"什么是響應式網頁設計?響應式布局的實現原理"

    摘要:概念響應式網頁設計最初是由提出的一個概念為什么一定要為每個用戶群各自打造一套設計和開發方案設計應該做到根據不同設備環境自動響應及調整。預計到年,移動互聯網的數據流量將超越端的流量。 概念 響應式網頁設計最初是由 Ethan Marcotte 提出的一個概念:為什么一定要為每個用戶群各自打造一套設計和開發方案?Web設計應該做到根據不同設備環境自動響應及調整。當然響應式Web設計不僅僅是...

    Joyven 評論0 收藏0

發表評論

0條評論

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