国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 開發 > CSS > 正文

CSS3的Flexbox骰子布局的實現及問題講解

2024-07-11 08:32:47
字體：大 中 小
來源：轉載
供稿：網友

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

一、First Face
我們知道，骰子有六個面，每個面的點的個數代表該面的值，第一個面由一個水平垂直居中的點組成。下面來看具體的實現：

CSS Code復制內容到剪貼板
  1.  <section name="01" class="face-01">      <span class="dot"></span>   
  2.  </section>    face-01 {   
  3. display: flex;    justify-content: center;   
  4. align-items: center;   

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

二、Second Face

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

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

 

三、Third Face

CSS Code復制內容到剪貼板
  1. .face-03 {     display: flex;   
  2.  justify-content: space-between;    }   
  3. .face-03 .dot:nth-of-type(2) {     align-self: center;   
  4. }    .face-03 .dot:nth-of-type(3) {   
  5.  align-self: flex-end;    }   
  6. <section name="03" class="face-03">     <span class="dot"></span>   

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板： 桓台县| 龙江县| 乾安县| 香河县| 绵竹市| 阿克苏市| 辰溪县| 巴南区| 登封市| 武夷山市| 七台河市| 武强县| 荣昌县| 鄂托克旗| 金堂县| 塘沽区| 湖口县| 清镇市| 杂多县| 巴楚县| 土默特右旗| 菏泽市| 宜丰县| 津市市| 大渡口区| 苍山县| 江西省| 安达市| 武安市| 建始县| 谷城县| 和龙市| 林西县| 惠水县| 阜阳市| 肇庆市| 建水县| 永登县| 略阳县| 基隆市| 同德县|