欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS3的Flexbox骰子布局的實(shí)現(xiàn)及問(wèn)題講解

Benjamin   發(fā)布時(shí)間：2016-06-27 11:04:07   作者： Benjamin   我要評(píng)論
骰子布局顧名思義,就是好比骰子的一面最多可以放置9個(gè)點(diǎn),而每個(gè)面放置的點(diǎn)數(shù)正好就是一個(gè)布局的模型圖,這里我們就帶來(lái)CSS3的Flexbox骰子布局的實(shí)現(xiàn)及問(wèn)題講解:

本文中只是熟悉基本屬性的用法，并完成一組骰子各個(gè)面的制作。在下面的內(nèi)容我不會(huì)涉及flexbox一些比較棘手的問(wèn)題，比如舊版本語(yǔ)法、供應(yīng)商前綴、瀏覽器怪癖等：

一、First Face
我們知道，骰子有六個(gè)面，每個(gè)面的點(diǎn)的個(gè)數(shù)代表該面的值，第一個(gè)面由一個(gè)水平垂直居中的點(diǎn)組成。下面來(lái)看具體的實(shí)現(xiàn)：

CSS Code復(fù)制內(nèi)容到剪貼板
  1.  <section name="01" class="face-01">   
  2.   <span class="dot"></span>   
  3.  </section>   
  4. face-01 {   
  5. display: flex;   
  6. justify-content: center;   
  7. align-items: center;   

關(guān)于justify-content和align-items的用法請(qǐng)參考這里justify-content，align-items。使用flexbox，垂直居中兩行屬性就可以搞定，很easy!

二、Second Face

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .face-02 {   
  2.  display: flex;   
  3.  justify-content: space-between;   
  4. }   
  5. .face-02 .dot:nth-of-type(2) {   
  6.  align-self: flex-end;   
  7. }   
  8.   <section name="02" class="face-02">   
  9.    <span class="dot"></span>   
  10.    <span class="dot"></span>   
  11.   </section>  

這里我們不能使用align-items屬性，使用它兩個(gè)點(diǎn)都會(huì)受影響，flexbox提供了一個(gè)align-self屬性，這個(gè)屬性可以讓我們更方便的控制flex items的各項(xiàng)沿著cross axias方向，設(shè)置不同的布局。align-self的用法參考這里align-self。

 

三、Third Face

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .face-03 {   
  2.  display: flex;   
  3.  justify-content: space-between;   
  4. }   
  5. .face-03 .dot:nth-of-type(2) {   
  6.  align-self: center;   
  7. }   
  8. .face-03 .dot:nth-of-type(3) {   
  9.  align-self: flex-end;   
  10. }   
  11. <section name="03" class="face-03">   
  12.  <span class="dot"></span>   
  13.  <span class="dot"></span>   
  14.  <span class="dot"></span>   
  15. </section>  

該face與second face 使用的屬性相同，不再解釋。

 

四、Fourth Face

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .face-04 {   
  2.  display: flex;   
  3.  justify-content: space-between;   
  4.  flex-direction: column;   
  5. }   
  6. .face-04 .column {   
  7.  display: flex;   
  8.  justify-content: space-between;   
  9. }   
  10. <section name="04" class="face-04">   
  11.   <div class="column">   
  12.     <span class="dot"></span>   
  13.     <span class="dot"></span>   
  14.   </div>   
  15.   <div class="column">   
  16.     <span class="dot"></span>   
  17.     <span class="dot"></span>   
  18.   </div>   
  19. </section>  

本例中使用了flex-direction，從字面意思可以看出，是用來(lái)控制flex的方向，即按列還是按行來(lái)布局，該屬性更詳細(xì)的用法可以參考這里flex-direction

后面Fifth Face 和 Sixth Face,根據(jù)前面的布局思想，就很easy了不再贅述！

寫(xiě)到此，想想配合JS寫(xiě)一個(gè)玩骰子的小游戲應(yīng)該很easy了吧。

 

五、實(shí)現(xiàn)1,2,3,4,6,12等份

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .row {   
  2.   display: flex;   
  3.   box-sizing: border-box;   
  4. }   
  5.   
  6. .column {   
  7.   margin: 10px;   
  8.   flex-grow: 1;   
  9.   flex-shrink: 1;   
  10.   flex-basis: 0;   
  11.   box-sizing: border-box;   
  12. }   
  13. <section class="row">   
  14.   <div class="column">One</div>   
  15. </section>   
  16. <section class="row">   
  17.   <div class="column">One Half</div>   
  18.   <div class="column">One Half</div>   
  19. </section>   
  20. <section class="row">   
  21.   <div class="column">One Third</div>   
  22.   <div class="column">One Third</div>   
  23.   <div class="column">One Third</div>   
  24. </section>   
  25. <section class="row">   
  26.   <div class="column">One Fourth</div>   
  27.   <div class="column">One Fourth</div>   
  28.   <div class="column">One Fourth</div>   
  29.   <div class="column">One Fourth</div>   
  30. </section>   
  31. <section class="row">   
  32.   <div class="column">One Sixth</div>   
  33.   <div class="column">One Sixth</div>   
  34.   <div class="column">One Sixth</div>   
  35.   <div class="column">One Sixth</div>   
  36.   <div class="column">One Sixth</div>   
  37.   <div class="column">One Sixth</div>   
  38. </section>   
  39. <section class="row">   
  40.   <div class="column">One Twelve</div>   
  41.   <div class="column">One Twelve</div>   
  42.   <div class="column">One Twelve</div>   
  43.   <div class="column">One Twelve</div>   
  44.   <div class="column">One Twelve</div>   
  45.   <div class="column">One Twelve</div>   
  46.   <div class="column">One Twelve</div>   
  47.   <div class="column">One Twelve</div>   
  48.   <div class="column">One Twelve</div>   
  49.   <div class="column">One Twelve</div>   
  50.   <div class="column">One Twelve</div>   
  51.   <div class="column">One Twelve</div>   
  52. </section>  

2016627110435616.png (907×374)

在本例中用到了flex-grow,flex-shrink,flex-basis三個(gè)屬性。
1. flex-grow：根據(jù)需要用來(lái)定義伸縮項(xiàng)目的擴(kuò)展能力。它接受一個(gè)不帶單位的值做為一個(gè)比例。主要用來(lái)決定伸縮容器剩余空間按比例應(yīng)擴(kuò)展多少空間。
如果所有伸縮項(xiàng)目的“flex-grow”設(shè)置了“1”，那么每個(gè)伸縮項(xiàng)目將設(shè)置為一個(gè)大小相等的剩余空間。如果你給其中一個(gè)伸縮項(xiàng)目設(shè)置了“flex-grow”值為“2”，那么這個(gè)伸縮項(xiàng)目所占的剩余空間是其他伸縮項(xiàng)目所占剩余空間的兩倍。負(fù)值無(wú)效。
2. flex-shrink：根據(jù)需要用來(lái)定義伸縮項(xiàng)目收縮的能力。負(fù)值同樣無(wú)效。
3. flex-basis： 用來(lái)設(shè)置伸縮基準(zhǔn)值，剩余的空間按比率進(jìn)行伸縮，不支持負(fù)值。如果設(shè)置為0，圍繞內(nèi)容的額外的空間不會(huì)考慮在內(nèi)。如果設(shè)置為auto，額外的空間是基于flex-grow的值分配。

六、實(shí)現(xiàn)2-3-7布局

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .row237 .column:first-of-type {   
  2.   flex-grow: 2;   
  3.   flex-basis: 5px;   
  4. }   
  5. .row237 .column:nth-of-type(2) {   
  6.   flex-grow: 3;   
  7.   flex-basis: 18px;   
  8. }   
  9. .row237 .column:nth-of-type(3) {   
  10.   flex-grow: 7;   
  11.   flex-basis: 70.5px;   
  12. }   
  13.   
  14. <section class="row row237">   
  15.   <div class="column">One Half</div>   
  16.   <div class="column">One Third</div>   
  17.   <div class="column">One Seventh</div>   
  18. </section>  

此處各項(xiàng)flex-basis的值的計(jì)算，應(yīng)該有個(gè)公式(待解決)，如果有這個(gè)公式，配合sass，less等預(yù)處理語(yǔ)言實(shí)現(xiàn)多列自適應(yīng)布局將會(huì)很方便。

相關(guān)文章

  • 利用CSS3的flexbox實(shí)現(xiàn)水平垂直居中與三列等高布局

    這篇文章給大家介紹了三個(gè)小節(jié)的內(nèi)容，其中包括關(guān)于css3中flexbox需要掌握的概念、flexbox實(shí)現(xiàn)水平垂直居中對(duì)齊和三列等高自適應(yīng)頁(yè)腳區(qū)域黏附底部的布局，有需要的可以參考
    2016-09-12

  • 基礎(chǔ)的CSS3彈性盒Flexbox布局使用實(shí)例

    這篇文章主要介紹了基礎(chǔ)的CSS3彈性盒Flexbox布局使用實(shí)例,文中最后也提到了解決兼容性問(wèn)題的基本方法,需要的朋友可以參考下
    2016-04-08

  • CSS3的Flexbox布局的簡(jiǎn)明入門(mén)指南

    這篇文章主要介紹了CSS3的Flexbox布局的簡(jiǎn)明入門(mén)指南,Flexbox在"布局界"可謂風(fēng)光無(wú)限,近來(lái)Facebook開(kāi)源的React Native也采用Flexbox來(lái)布局,需要的朋友可以參考下
    2016-04-08

  • css3彈性盒模型（Flexbox）詳細(xì)介紹

    今天剛學(xué)了css3的彈性盒模型，這是一個(gè)可以讓你告別浮動(dòng)、完美實(shí)現(xiàn)垂直水平居中的新特性。本文主要是總結(jié)一下今天所學(xué)，有需要的朋友可以參考下
    2014-10-08

  • CSS3 Flexbox中flex-shrink屬性的用法示例介紹

    當(dāng)flex items的大小超過(guò)了flex container時(shí)， 各個(gè)flex item的壓縮比例，下面有個(gè)不錯(cuò)的教程，大家可以參考下
    2013-12-30

  • 10分鐘理解CSS3 FlexBox彈性布局

    這篇文章主要介紹了10分鐘理解CSS3 FlexBox彈性布局的相關(guān)資料，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-12-20

最新評(píng)論