flex色子练习

最新推荐文章于 2022-10-14 13:37:45 发布
最新推荐文章于 2022-10-14 13:37:45 发布
阅读量319 收藏 1
点赞数
分类专栏： 网站前端 文章标签： flex 色子
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/frank_fong/article/details/78788789
版权 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>flex色子练习</title>
<style>
.con {
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	width: 50px;
	height: 50px;
	padding: 5px;
	margin-bottom: 10px;
	border: 1px solid silver;
	border-radius: 30%;	
}
.item {
	width: 10px;
	height: 10px;
	background-color: blue;
	border-radius: 50%;
}
.con1 .item {
	width: 15px;
	height: 15px;
	background-color: red;
}
.con2 {
	justify-content: space-between;
	padding: 10px;
}
.con2b {
	flex-direction: column;
}
.con3 {
	flex-wrap: wrap;
	padding: 8px;
}
.con3 .item:first-child {
	align-self: flex-start;	
}
.con3 .item:last-child {
	align-self: flex-end;	
}
.con3b {
	flex-direction: column-reverse;
}
.con4 {
	flex-wrap: wrap;
	justify-content: space-between;
	align-content: space-between;
	padding: 10px;
}
.con4 .item {
	background-color: red;
}
.con5 {
	flex-wrap: wrap;
	justify-content: space-between;
	align-content: space-between;
	padding: 10px;
}
.con5 .item:nth-child(3) {
	margin-left: 9px;
}
.con6 {
	flex-wrap: wrap;
	justify-content: space-between;
}
.con6b {
	flex-direction: column;
}
</style>
</head>
<body>
<div class="con con1">
  <div class="item"></div>
</div>
<div class="con con2">
  <div class="item"></div>
  <div class="item"></div>
</div>
<div class="con con2 con2b">
  <div class="item"></div>
  <div class="item"></div>
</div>
<div class="con con3">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<div class="con con3 con3b">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<div class="con con4">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<div class="con con5">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<div class="con con6">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<div class="con con6 con6b">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
</body>
</html>




                

        

        

    




    

      

        

            

              
                
                  弗兰克的天空
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    1
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
flex的骰子练习

				
			

			

				

					mus-z的博客
				

				

					03-30
					
					400
					
				

			

		

		

			
				
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=bd5eb4e93b46d0ef613bb...

			
		

	



                

              
                



	

		

			

				
					
flex布局学习（四）flex色子布局练习

				
			

			

				

					weixin_30797199的博客
				

				

					01-01
					
					133
					
				

			

		

		

			
				
用flex布局达到以下效果，注意时两种6点的显示哦


  1 <!DOCTYPE html>
  2 <html>
  3 
  4     <head>
  5         <meta charset="UTF-8">
  6         <title>老师讲解的6色子点布局</title>
  ...

			
		

	



                


  
              

                


	

		

			

				
					
Flex 弹性布局 骰子篇练习

				
			

			

				

					qq_23966661的博客
				

				

					10-11
					
					2786
					
				

			

		

		

			
				
Flex布局实例——骰子布局



在CSS布局中，实现垂直居中、相同高度的列等一直是令人头疼的问题，但不管是什么布局，Flex往往都可以几行命令搞定；93%的人现在正在运行的浏览器都已经支持Flexbox，这比支持HTML5 的<video>元素要好；所以现在我们一起来见证Flexbox的神奇，看看利用Flex如何实现骰子布局。

1.单项目


<div class="fi...

			
		

	





	

		

			

				
					
经典flex骰子布局练习

				
			

			

				

					HYY的博客
				

				

					03-25
					
					630
					
				

			

		

		

			
				
实现效果：9个骰子效果图
涉及的样式属性如下：(基于display:flex)
justify-content
align-items
flex-direction
align-self

			
		

	



		

			
		



	

		

			

				
					
Flex布局——色子的小案例

				
			

			

				

					zxy9602的博客
				

				

					11-12
					
					734
					
				

			

		

		

			
				
制作色子，即制作相对应的1-6的几个点
1、运用知识点
a、容器——container
b、项目——item
代码示例：

>



2、主要采用上述两个的属性值进行编辑
例如：flex-direction方向——row、column、row-reverse、column-reverse
jusitfy-content:center——水平居中
flex-wrap：wra

			
		

	





	

		

			

				
					
flex入门练习

				
			

			

				

					07-09
				

			

		

		

			
				
本教程“flex入门练习”旨在帮助初学者理解并掌握Flex的基础知识，通过实际操作提升对Flex的运用能力。  在Flex中，主要涉及以下几个核心概念：  1. **ActionScript**：ActionScript是Flex的主要编程语言，基于...

			
		

	





	

		

			

				
					
初学FLEX做的小练习

				
			

			

				

					05-08
				

			

		

		

			
				
练习涉及到FLEX常用控件，与后台交互的数据服务（RemoteObject,WebService）,FLEX的几种导航，FLEX事件。 详见作者博客 http://blog.csdn.net/iamyzs/article/details/7540962； ... ...

			
		

	





	

		

			

				
					
Flex无限帐号

				
			

			

				

					09-10
				

			

		

		

			
				
Flex无限帐号 最新Flex3会员永久使用！无限下载补丁！不怕被封，随意登陆！只要好用点个赞。分享！ 实现无限下载补丁，解决一天 安装两个的烦恼！

			
		

	





	

		

			

				
					
Flex布局.xmind

				
			

			

				

					07-09
				

			

		

		

			
				
Flex布局.xmind

			
		

	





	

		

			

				
					
Flex Event总结

				
			

			

				

					10-29
				

			

		

		

			
				
对于学习flex event的朋友是个不错的参考。

			
		

	





	

		

			

				
					
flex官方视频教程和练习源代码

				
			

			

				

					08-24
				

			

		

		

			
				
本来是有天的东西,可是第三的代码就超过30M,上传不上来,只有1，2，4.从简到难,非常详细.

			
		

	





	

		

			

				
					
骰子样式html.html

				
			

			

				

					05-21
				

			

		

		

			
				
骰子样式写法，类似骰子的样子，让自己更好 掌握编程的能力，我认为可以试着自己动手操作，也是对自己的一次测试哦！

			
		

	





	

		

			

				
					
动态掷色子html源码

				
			

			

				

					10-23
				

			

		

		

			
				
html动态掷色子代码

			
		

	





	

		

			

				
					
面试官让我用Flex写色子布局，我直接给写了6个

				
			

			

				

					小王的技术库
				

				

					10-14
					
					4228
					
				

			

		

		

			
				
面试中经常会被问道前端布局的实现，最典型的就是使用Flex实现色子的布局，这篇文章会逐步的介绍如何使用Flex实现色子的各个点数的布局。为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。有需要的小伙伴，可以点击下方卡片领取，无偿分享。

			
		

	





	

		

			

				
					
flex画三点的色子

				
			

			

				

					aliven1的博客
				

				

					09-24
					
					290
					
				

			

		

		

			
				

			
		

	





	

		

			

				
					
【CSS面试题】Flex布局的问题【画色子】

				
			

			

				

					Milk~每天分享一点点，技术进步一点点
				

				

					07-17
					
					476
					
				

			

		

		

			
				
Flex实现一个三点的色子
常用语法回顾：

1.flex-direction:主轴方向，横向或纵向
2.justify-content:主轴对齐方式，从开始对齐、居中对齐、两侧对齐、结束对齐
3.align-items:其他轴对齐方式，其他轴就是和主轴垂直的那个轴，有开始对齐、居中对齐、两侧对齐、结束对齐…
4.flex-wrap:换行，什么时候换行
5.align-self:子元素在交叉轴对齐的方式，有开始对齐、居中对齐、两侧对齐、结束对齐…

熟练掌握这五个属性！
核心代码演示：
初始化：
 <

			
		

	





	

		

			

				
					
flex弹性布局-制作色子

				
			

			

				

					weixin_30906425的博客
				

				

					09-21
					
					157
					
				

			

		

		

			
				
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .first-face {
  display: flex;
  ju...

			
		

	





	

		

			

				
					
Flex布局练习-骰子布局

				
			

			

				

					qq_37464878的博客
				

				

					03-08
					
					338
					
				

			

		

		

			
				
flex布局练习--骰子布局骰子布局(1)单项目(2)双项目(3)三项目
学习来源：阮一峰的flex布局实战
骰子布局
<style type="text/css">
        /*div1是父级元素*/
		.div1{
			height: 90px;
			width: 90px;
			background-color: grey;
			display: flex; 
			display: -moz-flex; 
			display: -webkit-flex;
			ove

			
		

	





	

		

			

				
					
flex布局---九种色子案例分析

				
			

			

				

					weixin_44667072的博客
				

				

					07-16
					
					447
					
				

			

		

		

			
				
九种色子案例代码：
效果图：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <met...

			
		

	





	

		

			

				
					
flex 布局练习题

					
最新发布

				
			

			

				

					09-20
				

			

		

		

			
				
以下是一些flex布局的练习题案例：  1. 使用flex布局实现一个上下结构的容器，容器高度为100vw（视口宽度），背景颜色为skyblue。容器内有两个子元素，第一个子元素高度为父容器的一半，第二个子元素高度为父容器的...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值