CSS3的Flexbox骰子合理布局的完成及难题解读

日期:2021-03-03 类型:科技新闻 

关键词:凡科自助建站,企业网站怎么建设,智能建站系统,自己建个网站,搭建网站基本步骤

本文中只是熟习基础特性的用法,并进行1组骰子各个面的制做。在下面的內容我不容易涉及到flexbox1些较为繁杂的难题,例如旧版本号英语的语法、供货商前缀、访问器怪癖等:

1、First Face
大家了解,骰子有6个面,每一个面的点的个数意味着该面的值,第1个面由1个水平竖直垂直居中的点构成。下面看来实际的完成:

CSS Code拷贝內容到剪贴板
  1.  <section name="01" class="face-01">   
  2.   <span class="dot"></span>   
  3.  </section>   
  4. face-01 {   
  5. display: flex;   
  6. justify-contentcenter;   
  7. align-items: center;   

有关justify-content和align-items的用法请参照这里justify-content,align-items。应用flexbox,竖直垂直居中两行特性便可以搞定,很easy!

2、Second Face

CSS Code拷贝內容到剪贴板
  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特性,应用它两个点都会受危害,flexbox出示了1个align-self特性,这个特性可让大家更便捷的操纵flex items的各项沿着cross axias方位,设定不一样的合理布局。align-self的用法参照这里align-self。

 

3、Third Face

CSS Code拷贝內容到剪贴板
  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 应用的特性同样,已不解释。

 

4、Fourth Face

CSS Code拷贝內容到剪贴板
  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,从字面意思能够看出,是用来操纵flex的方位,即按列還是按行来合理布局,该特性更详尽的用法能够参照这里flex-direction

后边Fifth Face 和 Sixth Face,依据前面的合理布局观念,就很easy了已不赘述!

写到此,想一想相互配合JS写1个玩骰子的小手机游戏应当很easy了吧。

 

5、完成1,2,3,4,6,12等份

CSS Code拷贝內容到剪贴板
  1. .row {   
  2.   display: flex;   
  3.   box-sizing: border-box;   
  4. }   
  5.   
  6. .column {   
  7.   margin10px;   
  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>  

在本例选用到了flex-grow,flex-shrink,flex-basis3个特性。
1. flex-grow:依据必须用来界定伸缩新项目的拓展工作能力。它接纳1个不带企业的值作为1个占比。关键用来决策伸缩器皿剩下室内空间按占比应拓展是多少室内空间。
假如全部伸缩新项目的“flex-grow”设定了“1”,那末每一个伸缩新项目将设定为1个尺寸相同的剩下室内空间。假如你给在其中1个伸缩新项目设定了“flex-grow”值为“2”,那末这个伸缩新项目所占的剩下室内空间是别的伸缩新项目所占剩下室内空间的两倍。负值失效。
2. flex-shrink:依据必须用来界定伸缩新项目收拢的工作能力。负值一样失效。
3. flex-basis: 用来设定伸缩标准值,剩下的室内空间按比率开展伸缩,不适用负值。假如设定为0,紧紧围绕內容的附加的室内空间不容易考虑到在内。假如设定为auto,附加的室内空间是根据flex-grow的值分派。

6、完成2⑶⑺合理布局

CSS Code拷贝內容到剪贴板
  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>  

此处各项flex-basis的值的测算,应当有个公式(待处理),假如有这个公式,相互配合sass,less等预解决語言完成两列自融入合理布局可能很便捷。

上一篇:ie6 z 返回下一篇:没有了