flex布局样例

最新推荐文章于 2022-04-19 11:51:59 发布
最新推荐文章于 2022-04-19 11:51:59 发布
阅读量120 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43108539/article/details/108463955
版权

flex布局样例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div class="first-face">
		  <span class="pip"></span>
		</div>
		<div class="second-face">
		  <span class="pip"></span>
		  <span class="pip"></span>
		</div>
		<div class="third-face">
		  <span class="pip"></span>
		  <span class="pip"></span>
		  <span class="pip"></span>
		</div>
		<div class="fourth-face">
		  <div class="column">
		    <span class="pip"></span>
		    <span class="pip"></span>
		  </div>
		  <div class="column">
		    <span class="pip"></span>
		    <span class="pip"></span>
		  </div>
		</div>
		<div class="fifth-face">
		  <div class="column">
		    <span class="pip"></span>
		    <span class="pip"></span>
		  </div>
		  <div class="column">
		    <span class="pip"></span>
		  </div>
		  <div class="column">
		    <span class="pip"></span>
		    <span class="pip"></span>
		  </div>
		</div>
		<div class="sixth-face">
		  <div class="column">
		    <span class="pip"></span>
		    <span class="pip"></span>
		    <span class="pip"></span>
		  </div>
		  <div class="column">
		    <span class="pip"></span>
		    <span class="pip"></span>
		    <span class="pip"></span>
		  </div>
		</div>
	</body>
	<style>
		.first-face {
		  display: flex;
		  justify-content: center;
		  align-items: center;
		}
		
		.second-face {
		  display: flex;
		  justify-content: space-between;
		}
		
		.second-face .pip:nth-of-type(2) {
		  align-self: flex-end;
		}
		
		.third-face {
		  display: flex;
		  justify-content: space-between;
		}
		  
		.third-face .pip:nth-of-type(2) {
		  align-self: center;
		}
		
		.third-face .pip:nth-of-type(3) {
		  align-self: flex-end;
		}
		
		.fourth-face, .sixth-face {
		  display: flex;
		  justify-content: space-between;
		}
		
		.fourth-face .column, .sixth-face .column {
		  display: flex;
		  flex-direction: column;
		  justify-content: space-between;
		}
		
		.fifth-face {
		  display: flex;
		  justify-content: space-between;
		}
		  
		.fifth-face .column {
		  display: flex;
		  flex-direction: column;
		  justify-content: space-between;
		}
		  
		.fifth-face .column:nth-of-type(2) {
		  justify-content: center;
		}
		
		/* OTHER STYLES */
		
		* {
		  box-sizing: border-box;
		}
		
		html, body {
		  height: 100%;
		}
		
		body {
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  vertical-align: center;
		  flex-wrap: wrap;
		  align-content: center;
		  font-family: 'Open Sans', sans-serif;
		  
		  background: linear-gradient(top, #222, #333);
		}
		
		[class$="face"] {
		  margin: 16px;
		  padding: 4px;
		  
		  background-color: #e7e7e7;
		  width: 104px;
		  height: 104px;
		  object-fit: contain;
		  
		  box-shadow:
		    inset 0 5px white, 
		    inset 0 -5px #bbb,
		    inset 5px 0 #d7d7d7, 
		    inset -5px 0 #d7d7d7;
		  
		  border-radius: 10%;
		}
		
		.pip {
		  display: block;
		  width: 24px;
		  height: 24px;
		  border-radius: 50%;
		  margin: 4px;
		
		  background-color: #333;
		  box-shadow: inset 0 3px #111, inset 0 -3px #555;
		}
	</style>
</html>

参考链接：

https://codepen.io/LandonSchropp/pen/KpzzGo

http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

ClarenceJohnson
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
flex布局实例
weixin_45732235的博客
03-26 237
实现效果
Flex布局实例
xiaoritai7803的博客
04-20 303
一、骰子的布局骰子的一面，最多可以放置9个点。 下面，就来看看Flex如何实现，从1个点到9个点的布局如果不加说明，本节的HTML模板一律如下<div class="box"> <span class="item"></span> </div>上面代码中，div元素（代表骰子的一个面）是Flex容器，span元素（代表一个点）是Flex项目。如果有多个项目，就要添加多个span元素，以此类推。
flex布局示例
zyzhan
11-22 441
eg:1 <div class="container"> <div class="item"> </div> </div> .container{ width: 300px; height: 300px; background-color: skyblue; display: flex; justify-content: center; // 横向居中 align-items: center; // 垂直居中 } .item{
flex布局介绍和简单案例
xiasohuai的博客
07-21 8792
flex布局可以帮我们快速布局一些区块,实现你想要的效果,不用再去float,position之类的.我们在布局网页的时候很多时候都是一些特殊布局,flex就能帮我快速去布局,不需要去定位. 任何一个盒子都可以指定为flex布局,但是要注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。 基本案例1： &lt;ul&gt; &lt;li...
css布局样例源代码
11-04
以上就是关于“CSS布局样例源代码”所涉及的主要技术点，通过学习和实践这些知识点，初学者可以更好地掌握网页设计的基本技巧，并逐步提升自己的能力。在实际操作中，可以参考提供的test文件，逐步解析和理解代码...
CSS布局（1）-Flex布局
秋水惊鸿的博客
03-24 503
一、Flex布局是什么？ Flex是Flexible Box的缩写，意味“弹性布局”，通过将元素设定为容器，容器内部所包含的子元素称之为Flex项目，也就是容器成员。任何一个容器都可以指定为Flex布局。容器默认存在flex-wrap两根轴，水平的主轴和垂直的交叉轴，项目默认按照主轴排列，即默认按水平排列。 .box { display:flex; } <!--行内元素也可以使用flex布局--> .line{ display:inline-flex; } 注意：Flex
div+css布局样例
12-26
在这个名为"div+css布局样例"的压缩包中，我们可以期待看到一系列关于如何使用 `div` 和 `css` 进行布局的示例代码。这些示例可能涵盖了以下关键知识点： 1. **块级元素与内联元素**：`div` 作为块级元素，会占据...
flex上中下布局
匡次匡次的博客
03-25 3615
flex布局/弹性布局/经典三段式布局
flex布局教程的实例
11-20
嗯 关于廖雪峰老师网站的学习笔记---flex弹性盒子实例篇
html表格检索布局代码样例
最新发布
04-16
我可以帮您提供一些HTML表格检索布局代码的样例，以下是其中一个样例代码： ``` <!DOCTYPE html> <title>Table Search Layout table { border-collapse: collapse; width: 100%; font-size: 16px; ...
FLEX布局实例
jierenjia的博客
04-28 817
大家好，我是IT修真院郑州分院第8期学员，一枚正直善良的web程序员。今天给大家分享一下，修真院官网css5任务中可能会使用到的知识点：FLEX布局实例1.背景介绍2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。2.知识剖析采用 Flex 布局的元素，称为 Flex ...
flex布局小实例
katy_1的博客
11-19 279
这是一个flex布局小实例。 flex布局总是在用过后忘了，写这个博客是方便自己日后查看。 实现效果： 在实现效果之前先了解一下flex布局。 1.flex属性是flex-grow,flex-shrink和flex-basis的简写，默认值是0 1 auto。后两个属性可选。 建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。 2.flex-grow属...
flex布局的简单实例
weixin_40679158的博客
05-25 509
学习flex布局对于移动端的适应是十分重要的，可以大量减少重复性代码的编写。 推荐到菜鸟教程进行学习 这里主要实现了一个简单的例子 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device...
flex布局案例
hcyhcyhcy_的博客
04-19 1146
justify-content和align-items https://blog.csdn.net/u014614038/article/details/112062197 justify-content:center;水平居中 https://www.jianshu.com/p/b806c97e6512（通过flex-direction确定了主轴方向，justify-content确定了在主轴方向的对齐方式，其控制的目标是间距和排版） align-items:center;垂直居中 https://w
flex 布局案例
一抹茶-CSDN的博客
05-26 576
1.无flex布局的 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css"/> </head> <body> <div class="container"
Flex布局完全指南：从入门到精通
"Flex布局教程" Flex布局是一种现代的、响应式的网页布局方式，由W3C在2009年提出，旨在简化复杂的传统布局模式，如基于盒模型的display属性、position属性和float属性的组合。随着浏览器对Flex布局的广泛支持，它...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值