Web的Flex弹性盒模型
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Web的Flex弹性盒模型</title>
<style>
body{
font-family: '微软雅黑';
/*font-family: cursive, '微软雅黑';*/
padding: 0;
margin: 20px 0 40px; font-size: 16px;
background-color: #F9F9F9;
}
h1{
color: #0BF;
text-indent: 15px;
}
h3{
color: #6D7273;
text-indent: 15px;
padding: 10px 0;
background-color: #fff;
}
p{
margin: 0;
padding: 0;
color: #666;
margin-bottom: 5px;
} .boxes{
padding: 0 10px;
overflow: hidden;
display: -webkit-flex;
flex-wrap: wrap;
align-content:flex-start
}
.box{
width: 400px;
padding: 8px;
margin-right: 20px;
margin-bottom: 10px;
display: inline-block;
box-shadow: 2px 2px 3px 1px #E0E0E0;
} .boxstyle{
padding: 8px 0;
}
.boxborder{
border: 1px dashed #B6B6B6;
}
.demo{
color: #fff;
display: -webkit-flex;
text-align: center;
}
.demo .item{
line-height: 40px;
background-color: #ddd;
}
.demo .item:nth-child(1){
background-color: #E46C49;
}
.demo .item:nth-child(2){
background-color: #37B0D3;
}
.demo .item:nth-child(3){
background-color: #68B33D;
}
.demo .item:nth-child(4){
background-color: #E46775;
}
.demo .item:nth-child(5){
background-color: #CFC731;
}
.demo .item:nth-child(6){
background-color: #8370F4;
} .demo .item span{
display: block;
} .demo2 .item{
height: 60px;
width: 150px;
word-wrap: break-word;
line-height: 1.5;
} .demo-row{
flex-direction: row;
}
.demo-row-reverse{
flex-direction: row-reverse;
}
.demo-column{
height: 200px;
flex-direction: column;
}
.demo-column-reverse{
height: 200px;
flex-direction: column-reverse;
} .demo-nowrap{
-webkit-flex-wrap: nowrap;
width: 400px;
}
.demo-wrap{
-webkit-flex-wrap: wrap;
width: 400px;
}
.demo-wrap-reverse{
-webkit-flex-wrap: wrap-reverse;
width: 400px;
}
.demo-align-content{
width: 400px;
flex-wrap: wrap;
height:200px;
border: 1px dashed #B6B6B6;
}
.demo-align-content .item:nth-child(1), .demo-align-content .item:nth-child(2), .demo-align-content .item:nth-child(3),
.demo-align-content .item:nth-child(4), .demo-align-content .item:nth-child(5), .demo-align-content .item:nth-child(6){
background-color: #717171;
width: 80px;
margin: 2px 10px;
} </style>
</head>
<body>
<h1>Web的Flex弹性盒模型</h1>
<section class="content"> <h3>[ flex ]</h3>
<div class="boxes">
<div class="box">
<div class="boxstyle">
<p>display: -webkit-flex;</p>
</div>
<div class="demo demo1">
<div class="item" style="width:100px">width:100px;</div>
<div class="item" style="flex:2">flex: 2;</div>
<div class="item" style="flex:1">flex: 1;</div>
</div>
</div> <div class="box">
<div class="boxstyle">
<p>display: -webkit-flex; </p>
</div>
<div class="demo demo2 boxborder">
<div class="item" style="margin-right:10px;">
<span>width:150px;</span> <span>margin-right:10px;</span></div>
<div class="item" style="flex:1">flex: 1;</div>
<div class="item" style="margin-left:10px;">
<span>width:150px;</span> <span>margin-left:10px;</span></div>
</div>
</div>
</div> <h3>[ flex-direction ]</h3>
<div class="boxes" style="width:900px">
<div class="box">
<div class="boxstyle">
<p>flex-direction: row; /*default*/</p>
<p>display: -webkit-flex;</p>
</div>
<div class="demo demo-row">
<div class="item" style="flex:1">flex: 1;</div>
<div class="item" style="flex:2">flex: 2;</div>
<div class="item" style="flex:3">flex: 3;</div>
</div>
</div> <div class="box">
<div class="boxstyle">
<p>flex-direction: row-reverse;</p>
<p>display: -webkit-flex; </p>
</div>
<div class="demo demo-row-reverse">
<div class="item" style="flex:1">flex: 1;</div>
<div class="item" style="flex:2">flex: 2;</div>
<div class="item" style="flex:3">flex: 3;</div>
</div>
</div> <div class="box">
<div class="boxstyle">
<p>flex-direction: column;</p>
<p>display: -webkit-flex; </p>
</div>
<div class="demo demo-column">
<div class="item" style="flex:1">flex: 1;</div>
<div class="item" style="flex:2">flex: 2;</div>
<div class="item" style="flex:3">flex: 3;</div>
</div>
</div> <div class="box">
<div class="boxstyle">
<p>flex-direction: column-reverse;</p>
<p>display: -webkit-flex; </p>
</div>
<div class="demo demo-column-reverse">
<div class="item" style="flex:1">flex: 1;</div>
<div class="item" style="flex:2">flex: 2;</div>
<div class="item" style="flex:3">flex: 3;</div>
</div>
</div>
</div> <h3>[ flex-wrap ]</h3>
<div class="boxes" style="width:1310px">
<div class="box">
<div class="boxstyle">
<p>-webkit-flex-wrap: nowrap; /* default */</p>
<p>display: -webkit-flex; </p>
<p>width: 400px</p>
</div>
<div class="demo demo-nowrap">
<div class="item" style="width: 100px">100px;</div>
<div class="item" style="width: 200px">width: 200px;</div>
<div class="item" style="width: 300px">width: 300px;</div>
</div>
</div>
<div class="box">
<div class="boxstyle">
<p>-webkit-flex-wrap: wrap</p>
<p>display: -webkit-flex; </p>
<p>width: 400px</p>
</div>
<div class="demo demo-wrap boxborder">
<div class="item" style="width: 100px">100px;</div>
<div class="item" style="width: 200px">width: 200px;</div>
<div class="item" style="width: 300px">width: 300px;</div>
</div>
</div>
<div class="box">
<div class="boxstyle">
<p>-webkit-flex-wrap: wrap-reverse</p>
<p>display: -webkit-flex; </p>
<p>width: 400px</p>
</div>
<div class="demo demo-wrap-reverse boxborder">
<div class="item" style="width: 100px">100px;</div>
<div class="item" style="width: 200px">width: 200px;</div>
<div class="item" style="width: 300px">width: 300px;</div>
</div>
</div>
</div> <h3>[ flex-flow ]: flex-direction flex-wrap; /* 自个体会吧 */</h3> <h3>[ justify-content ]</h3>
<div class="boxes" style="width:1310px;">
<div class="box">
<div class="boxstyle">
<p>/* 效果如同 float:left; */</p>
<p>justify-content: flex-start; /* default */</p>
<p>display: -webkit-flex;</p>
</div>
<div class="demo boxborder" style="justify-content: flex-start;">
<div class="item" style="width:100px">width:100px;</div>
<div class="item" style="width:100px">width:100px;</div>
</div>
</div> <div class="box">
<div class="boxstyle">
<p><p>/* 效果如同 float:right; */</p></p>
<p>justify-content: flex-end;</p>
<p>display: -webkit-flex;</p>
</div>
<div class="demo demo-justify boxborder" style="justify-content: flex-end;">
<div class="item" style="width:100px">width:100px;</div>
<div class="item" style="width:100px">width:100px;</div>
</div>
</div> <div class="box">
<div class="boxstyle">
<p>/* 第三代水平居中方案 */</p>
<p>justify-content: center;</p>
<p>display: -webkit-flex;</p>
</div>
<div class="demo demo-justify-end boxborder" style="justify-content: center;">
<div class="item" style="width:100px">width:100px;</div>
<div class="item" style="width:100px">width:100px;</div>
</div>
</div> <div class="box">
<div class="boxstyle">
<p>justify-content: space-between; </p>
<p>display: -webkit-flex;</p>
</div>
<div class="demo demo-justify boxborder" style="justify-content: space-between;">
<div class="item" style="width:100px">width:100px;</div>
<div class="item" style="width:100px">width:100px;</div>
</div>
</div> <div class="box">
<div class="boxstyle">
<p>justify-content: space-around; </p>
<p>display: -webkit-flex;</p>
</div>
<div class="demo demo-justify-end boxborder" style="justify-content: space-around;">
<div class="item" style="width:100px">width:100px;</div>
<div class="item" style="width:100px">width:100px;</div>
</div>
</div>
</div> <h3>[ align-self ]</h3>
<div class="boxes">
<div class="box" style="width:1000px;">
<div class="boxstyle">
<p>display: -webkit-flex;</p>
</div>
<div class="demo boxborder" style="width: 1000px; height:200px;">
<div class="item" style="width:200px; align-self:flex-start;">align-self:flex-start;</div>
<div class="item" style="width:200px; align-self:flex-end;">align-self:flex-end;</div>
<div class="item" style="width:200px; align-self:center;">align-self:center;</div>
<div class="item" style="width:200px; align-self:auto;">
<span>align-self:auto;</span>
<span>/*default */</span>
</div> <div class="item" style="width:200px; align-self:baseline;">align-self:baseline;</div>
<div class="item" style="width:200px; align-self:stretch;">align-self:stretch;</div>
</div>
</div>
</div> <h3>[ align-items ]</h3>
<div class="boxes">
<div class="box">
<div class="boxstyle">
<p>align-items: flex-start; /* default */</p>
<p>display: -webkit-flex;</p>
</div>
<div class="demo boxborder" style="align-items: flex-start;height:200px;">
<div class="item" style="width:100px">width:100px;</div>
<div class="item" style="width:100px">width:100px;</div>
</div>
</div> <div class="box">
<div class="boxstyle">
<p>align-items: flex-end; </p>
<p>display: -webkit-flex;</p>
</div>
<div class="demo boxborder" style="align-items: flex-end;height:200px;">
<div class="item" style="width:100px">width:100px;</div>
<div class="item" style="width:100px">width:100px;</div>
</div>
</div> <div class="box">
<div class="boxstyle">
<p>/* 第三代垂直居中 */</p>
<p>align-items: center; </p>
<p>display: -webkit-flex;</p>
</div>
<div class="demo boxborder" style="align-items: center;height:200px;">
<div class="item" style="width:100px">width:100px;</div>
<div class="item" style="width:100px">width:100px;</div>
</div>
</div> <div class="box">
<div class="boxstyle">
<p>align-items: baseline; </p>
<p>display: -webkit-flex;</p>
</div>
<div class="demo boxborder" style="align-items: baseline;height:200px;">
<div class="item" style="width:100px">width:100px;</div>
<div class="item" style="width:100px">width:100px;</div>
</div>
</div> <div class="box">
<div class="boxstyle">
<p>align-items: stretch; </p>
<p>display: -webkit-flex;</p>
</div>
<div class="demo boxborder" style="align-items: stretch;height:200px;">
<div class="item" style="width:100px; height:100px;">height:100px;</div>
<div class="item" style="width:150px; min-height:20px;">min-height:20px;</div>
<div class="item" style="width:150px; max-height:60px;">max-height:60px;</div>
</div>
</div>
</div> <h3>[ align-content ]</h3>
<div class="boxes">
<div class="box">
<div class="boxstyle">
<p>/* <span style="color:red"> 对比 align-items</span>*/</p>
<p>align-items: flex-start</p>
<p>display: -webkit-flex;</p>
</div>
<div class="demo demo-align-content" style="align-items: flex-start">
<div class="item" >a</div>
<div class="item" >b</div>
<div class="item" >c</div>
<div class="item" >d</div>
<div class="item" >e</div>
<div class="item" >f</div> </div>
</div> <div class="box">
<div class="boxstyle">
<p>align-content: flex-start; </p>
<p>display: -webkit-flex;</p>
</div>
<div class="demo demo-align-content" style="align-content: flex-start;">
<div class="item" >a</div>
<div class="item" >b</div>
<div class="item" >c</div>
<div class="item" >d</div>
<div class="item" >e</div>
<div class="item" >f</div> </div>
</div> <div class="box">
<div class="boxstyle">
<p>align-content: flex-end; </p>
<p>display: -webkit-flex;</p>
</div>
<div class="demo demo-align-content" style="align-content: flex-end;">
<div class="item" >a</div>
<div class="item" >b</div>
<div class="item" >c</div>
<div class="item" >d</div>
<div class="item" >e</div>
<div class="item" >f</div> </div>
</div>
<div class="box">
<div class="boxstyle">
<p>align-content: center; </p>
<p>display: -webkit-flex;</p>
</div>
<div class="demo demo-align-content" style="align-content: center;">
<div class="item" >a</div>
<div class="item" >b</div>
<div class="item" >c</div>
<div class="item" >d</div>
<div class="item" >e</div>
<div class="item" >f</div> </div>
</div>
<div class="box">
<div class="boxstyle">
<p>align-content: space-between; </p>
<p>display: -webkit-flex;</p>
</div>
<div class="demo demo-align-content" style="align-content: space-between;">
<div class="item" >a</div>
<div class="item" >b</div>
<div class="item" >c</div>
<div class="item" >d</div>
<div class="item" >e</div>
<div class="item" >f</div>
</div>
</div>
<div class="box">
<div class="boxstyle">
<p>align-content: space-around; </p>
<p>display: -webkit-flex;</p>
</div>
<div class="demo demo-align-content" style="align-content: space-around;">
<div class="item" >a</div>
<div class="item" >b</div>
<div class="item" >c</div>
<div class="item" >d</div>
<div class="item" >e</div>
<div class="item" >f</div> </div>
</div> <div class="box">
<div class="boxstyle">
<p>align-content: stretch; /*default*/ </p>
<p>display: -webkit-flex;</p>
</div>
<div class="demo demo-align-content" style="align-content: stretch;">
<div class="item" >a</div>
<div class="item" >b</div>
<div class="item" >c</div>
<div class="item" >d</div>
<div class="item" >e</div>
<div class="item" >f</div> </div>
</div> </div> <h3>[ order ]</h3>
<div class="boxes">
<div class="box" style="width:1000px;">
<div class="boxstyle">
<p>display: -webkit-flex;</p>
</div>
<div class="demo demo-align-content" style="width: 1000px;height:40px;">
<div class="item" >a</div>
<div class="item" >b</div>
<div class="item" >c</div>
<div class="item" style="order:-1; width:120px"> d (order:-1) </div>
<div class="item" >e</div>
<div class="item" >f</div>
</div>
</div>
</div> </section> </body>
</html>
Web的Flex弹性盒模型的更多相关文章
- Flex 弹性盒模型
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 87.CSS Flex 弹性盒模型布局教程（共用的css在48篇文章gird）
CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 dis ...
- 彻底搞懂flex弹性盒模型布局
为什么要用flex 基于css3简单方便,更优雅的实现,浏览器兼容性好,传统的css实现一个div居中布局要写一堆代码,而现在几行代码就搞定了,没有理由不用flex. 兼容性: Base Browse ...
- box flex 弹性盒模型（转载）
css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.这与XUL(火狐使用的用户交互语言)相似,其它语言也使用相同的盒模型,如XAML .GladeX ...
- columns分栏与flex弹性盒模型
columns 分栏 值:column-width:设置每列的宽度 column-count:设置列数 例:columns{200px 3} 列数和宽度固定 co ...
- web移动端-弹性盒模型
(父元素加) : /*新版弹性盒模型*/ /* display: flex; */ /*设置主轴方向为水平方向*/ /* flex-direction: row; */ /*设置主轴方向为垂直方向*/ ...
- flex弹性盒模型
flex 意思是弹性布局,用来给盒模型提供最大的灵活度,指定容器中的项目为弹性布局,类似于float:left; 比float的好处是容器没有设置高度,会根据项目来自适应高度,我们都知道,设置floa ...
- JS Web的Flex弹性盒子模型
1. justify-content <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- 彻底弄懂css3的flex弹性盒模型
由于在日常工作中使用css或者bootstrap的栅格系统已经能很好的满足业务需求,所以一直以来对css3的弹性布局不是很感冒. 近日有幸在一篇文章中领略了flex的魅力--简洁优雅.随试之. /*容 ...
随机推荐
- visualization of filters keras 基于Keras的卷积神经网络（CNN）可视化
https://adeshpande3.github.io/adeshpande3.github.io/ https://blog.csdn.net/weiwei9363/article/detail ...
- Blender学习
学习顺序(下面为引用他人的视频或博客) 51个必须知道的blender操作 https://www.bilibili.com/video/av4619930/ Blender常用快捷键一览表 http ...
- 移动App专项测试
移动App测试实战—专项测试 转自:http://www.51testing.com/html/58/n-3713758.html 我们在进行了手工的功能测试之后,也开发了一些自动化测试用例,并且做了 ...
- 类与对象 && 继承
以下是本人的对类与对象.继承的一些理解,如有错误之处万望谅解,如有朋友愿意指正,十分乐意,万分感谢! 类与对象 类与对象是学习编程的基础(大概吧),那么何为类?何为对象呢? 一.简 ...
- QT4.8应用控制程序设计
2012-02-20 22:06:59 从uboot到kernel最新版最后到QT最新版移植都完成后,从初级阶段要走向中级阶段了.初步一个设想是然2440通过QT界面控制小车.先做一个界面模块控制LE ...
- Oarcle之group by关键字与having关键字
group by关键字 *group by :分组由 作用: 用于对于查询的数据进行分组并进行处理 例如:select deptno ,job from emp group by deptno, ...
- cnetos7设置中文显示及中文输入法
Centos7安装的时候即使选择了中文安装,因为安装后并没有GUI,即使后来安装GUI后默认依旧是英文显示. 输入locale后显示的是 永久修改成中文:编辑/etc/profile.d/lang.s ...
- day10-11-python基础之字符串
1.开发工具 python开发IDE: pycharm.eclipse # 专业版 # 不要汉化 2.运算符 结果是值 算数运算 a = 10 * 10 赋值运算 a = a + 1 a+=1 结果是 ...
- Java 新建excle文件并填充模版内容
Java 新建excle文件并填充模版内容 一.JAR import java.io.BufferedReader; import java.io.File; import java.io.FileI ...
- 基础JAVA程序设计（多个类与方法的实现2）
设计一个类代表二维空间的一个点(Point),要求:两个成员变量:x坐标和y坐标. 设计一个类代表二维空间的一个圆(Circle),要求:两个成员变量:一个是圆心,一个是半径:提供计算圆面积的方法:提 ...