网页HTML5制作flex布局骰子,Flex布局示例--骰子

下面是编程之家 jb51.cc 通过网络收集整理的代码片段。

编程之家小编现在分享给大家，也给大家做个参考。

.cBox{display: flex; flex-direction:column;}

.one{background-color: #9900FF;}

.two{background-color: #996633;}

.three{background-color: #BF4040;}

.four{background-color: #133312;}

.five{background-color: #6B2443;}

.six{background-color: #3C8A2E;}

.item{background-color: #87FFAD; width: 20px; height: 20px; border-radius: 10px; margin: 3px;}

.container{width: 80px; height: 80px; margin: 5px; border-radius: 3px; padding: 2px;}

.Box{

display: flex;

justify-content: center;

align-items:center;

}

.Box2{

display: flex;

justify-content:space-between;

}

.Box2 .item:nth-child(2){

align-self:flex-end;

}

.Box3{

display: flex;

justify-content:space-between;

}

.Box3 .item:nth-child(2){

align-self:center;

}

.Box3 .item:nth-child(3){

align-self:flex-end;

}

.Box4{

display: flex;

flex-wrap:wrap;

justify-content:flex-end;

align-content:space-between;

}

.Box4 .column{

flex-basis:100%;

display: flex;

justify-content:space-between;

}

.Box5{

display: flex;

justify-content:space-between;

}

.Box5 .column{

display: flex;

flex-direction:column;

justify-content:space-between;

}

.Box5 .column:nth-child(2){

justify-content:center;

}

.Box6{

display: flex;

flex-warp:wrap;

align-content:space-between;

}

.Box6 .column{

display: flex;

flex-direction:column;

justify-content:space-between;

}

以上是编程之家(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

总结

以上是编程之家为你收集整理的Flex布局示例--骰子全部内容，希望文章能够帮你解决Flex布局示例--骰子所遇到的程序开发问题。

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

小编个人微信号 jb51ccc

喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！