CSS3中如何實(shí)現(xiàn)Flexbox骰子布局

小編給大家分享一下CSS3中如何實(shí)現(xiàn)Flexbox骰子布局，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

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

 <section name="01" class="face-01">   
  <span class="dot"></span>   
 </section>   
face-01 {   
display: flex;   
justify-content: center;   
align-items: center;

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

二、Second Face

.face-02 {   
 display: flex;   
 justify-content: space-between;   
}   
.face-02 .dot:nth-of-type(2) {   
 align-self: flex-end;   
}   
  <section name="02" class="face-02">   
   <span class="dot"></span>   
   <span class="dot"></span>   
  </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

.face-03 {   
 display: flex;   
 justify-content: space-between;   
}   
.face-03 .dot:nth-of-type(2) {   
 align-self: center;   
}   
.face-03 .dot:nth-of-type(3) {   
 align-self: flex-end;   
}   
<section name="03" class="face-03">   
 <span class="dot"></span>   
 <span class="dot"></span>   
 <span class="dot"></span>   
</section>

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

四、Fourth Face

.face-04 {   
 display: flex;   
 justify-content: space-between;   
 flex-direction: column;   
}   
.face-04 .column {   
 display: flex;   
 justify-content: space-between;   
}   
<section name="04" class="face-04">   
  <div class="column">   
    <span class="dot"></span>   
    <span class="dot"></span>   
  </div>   
  <div class="column">   
    <span class="dot"></span>   
    <span class="dot"></span>   
  </div>   
</section>

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

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

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

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

.row {   
  display: flex;   
  box-sizing: border-box;   
}   
  
.column {   
  margin: 10px;   
  flex-grow: 1;   
  flex-shrink: 1;   
  flex-basis: 0;   
  box-sizing: border-box;   
}   
<section class="row">   
  <div class="column">One</div>   
</section>   
<section class="row">   
  <div class="column">One Half</div>   
  <div class="column">One Half</div>   
</section>   
<section class="row">   
  <div class="column">One Third</div>   
  <div class="column">One Third</div>   
  <div class="column">One Third</div>   
</section>   
<section class="row">   
  <div class="column">One Fourth</div>   
  <div class="column">One Fourth</div>   
  <div class="column">One Fourth</div>   
  <div class="column">One Fourth</div>   
</section>   
<section class="row">   
  <div class="column">One Sixth</div>   
  <div class="column">One Sixth</div>   
  <div class="column">One Sixth</div>   
  <div class="column">One Sixth</div>   
  <div class="column">One Sixth</div>   
  <div class="column">One Sixth</div>   
</section>   
<section class="row">   
  <div class="column">One Twelve</div>   
  <div class="column">One Twelve</div>   
  <div class="column">One Twelve</div>   
  <div class="column">One Twelve</div>   
  <div class="column">One Twelve</div>   
  <div class="column">One Twelve</div>   
  <div class="column">One Twelve</div>   
  <div class="column">One Twelve</div>   
  <div class="column">One Twelve</div>   
  <div class="column">One Twelve</div>   
  <div class="column">One Twelve</div>   
  <div class="column">One Twelve</div>   
</section>

在本例中用到了flex-grow,flex-shrink,flex-basis三個(gè)屬性。
1. flex-grow：根據(jù)需要用來定義伸縮項(xiàng)目的擴(kuò)展能力。它接受一個(gè)不帶單位的值做為一個(gè)比例。主要用來決定伸縮容器剩余空間按比例應(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ù)需要用來定義伸縮項(xiàng)目收縮的能力。負(fù)值同樣無(wú)效。
3. flex-basis： 用來設(shè)置伸縮基準(zhǔn)值，剩余的空間按比率進(jìn)行伸縮，不支持負(fù)值。如果設(shè)置為0，圍繞內(nèi)容的額外的空間不會(huì)考慮在內(nèi)。如果設(shè)置為auto，額外的空間是基于flex-grow的值分配。

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

.row237 .column:first-of-type {   
  flex-grow: 2;   
  flex-basis: 5px;   
}   
.row237 .column:nth-of-type(2) {   
  flex-grow: 3;   
  flex-basis: 18px;   
}   
.row237 .column:nth-of-type(3) {   
  flex-grow: 7;   
  flex-basis: 70.5px;   
}   
  
<section class="row row237">   
  <div class="column">One Half</div>   
  <div class="column">One Third</div>   
  <div class="column">One Seventh</div>   
</section>

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

以上是“CSS3中如何實(shí)現(xiàn)Flexbox骰子布局”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！