flex的骰子练习

最新推荐文章于 2024-04-09 12:00:03 发布

mus_木司

最新推荐文章于 2024-04-09 12:00:03 发布

阅读量424

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/mus123/article/details/105200809

版权

这篇博客介绍了如何利用Flex布局进行实践操作，通过链接提供了flex的基础讲解和阮一峰的实战篇，同时提供了一个在线骰子练习的CodePen链接，涵盖了从初始状态到1到6的各种状态变化。

摘要由CSDN通过智能技术生成

flex讲解：https://www.jianshu.com/p/59b88ba4e579

阮一峰flex实战篇：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

在线骰子练习：https://codepen.io/elsonzhang/pen/aaaLQw?cf_chl_jschl_tk=bd5eb4e93b46d0ef613bb31c3baeff8f86ddf61f-1585550693-0-AbXxhWzqOrsJuyuAhXM1n22EDph948uBKPmuR9L1AWrtvBH8JcIs51Hkhts3w4JE-CtP-AKErBsN97caWp7Z20L2rdo8NY2Nbr5sHQWOAMlDiZ0VQxcaP2O19bqMJy5TvyDjRZVgcUGowyyosN7G69W4LkiqpBJbVNMC9fQLc0jVXD9X8Xg4XwiO8afbz4lI4J-8G7_dav7p-8klbEsbu5rIfwtUFhG3Q-l9ax1c1JLnO_H8E_p4qM_Jjo32AL953Yn73UC_p19I9sV9ygFIOxEbAn5rXgCqEEAyZKBh40u2jQL2EwY7A45GleboadP3hX22MnuIeunJ_cGR-mcEdbvEIc_MZKKDj0tfqhtm81A6

初始状态

<ul class="container tmp-style">
  <li></li>
</ul>

body {
   display: flex;}
ul,li {
   
  margin: 0;
  padding: 0;
  list-style: none; 
}
.container {
   
  display: flex;
  width: 100px;
  height: 100px;
  margin: 10px;
  background: #333;
  border-radius: 10px;
}

.container li {
   
  height: 30px;
  width:<