Flex 弹性盒模型
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Web的Flex弹性盒模型</title>
<style>
body{
font-family: '微软雅黑';
/*font-family: cursive, '微软雅黑';*/
padding: ;
margin: 20px 40px; font-size: 16px;
background-color: #F9F9F9;
}
h1{
color: #0BF;
text-indent: 15px;
}
h3{
color: #6D7273;
text-indent: 15px;
padding: 10px ;
background-color: #fff;
}
p{
margin: ;
padding: ;
color: #;
margin-bottom: 5px;
} .boxes{
padding: 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 ;
}
.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(){
background-color: #E46C49;
}
.demo .item:nth-child(){
background-color: #37B0D3;
}
.demo .item:nth-child(){
background-color: #68B33D;
}
.demo .item:nth-child(){
background-color: #E46775;
}
.demo .item:nth-child(){
background-color: #CFC731;
}
.demo .item:nth-child(){
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(), .demo-align-content .item:nth-child(), .demo-align-content .item:nth-child(),
.demo-align-content .item:nth-child(), .demo-align-content .item:nth-child(), .demo-align-content .item:nth-child(){
background-color: #;
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: ;</div>
<div class="item" style="flex:1">flex: ;</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: ;</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: ;</div>
<div class="item" style="flex:2">flex: ;</div>
<div class="item" style="flex:3">flex: ;</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: ;</div>
<div class="item" style="flex:2">flex: ;</div>
<div class="item" style="flex:3">flex: ;</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: ;</div>
<div class="item" style="flex:2">flex: ;</div>
<div class="item" style="flex:3">flex: ;</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: ;</div>
<div class="item" style="flex:2">flex: ;</div>
<div class="item" style="flex:3">flex: ;</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:-) </div>
<div class="item" >e</div>
<div class="item" >f</div>
</div>
</div>
</div> </section> </body>
</html>
Flex 弹性盒模型的更多相关文章
- Web的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 ...
- columns分栏与flex弹性盒模型
columns 分栏 值:column-width:设置每列的宽度 column-count:设置列数 例:columns{200px 3} 列数和宽度固定 co ...
- box flex 弹性盒模型（转载）
css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.这与XUL(火狐使用的用户交互语言)相似,其它语言也使用相同的盒模型,如XAML .GladeX ...
- flex弹性盒模型
flex 意思是弹性布局,用来给盒模型提供最大的灵活度,指定容器中的项目为弹性布局,类似于float:left; 比float的好处是容器没有设置高度,会根据项目来自适应高度,我们都知道,设置floa ...
- 彻底弄懂css3的flex弹性盒模型
由于在日常工作中使用css或者bootstrap的栅格系统已经能很好的满足业务需求,所以一直以来对css3的弹性布局不是很感冒. 近日有幸在一篇文章中领略了flex的魅力--简洁优雅.随试之. /*容 ...
- Flex弹性盒模型（新老版本完整）--移动端开发整理笔记（二）
Flex布局 Flex即Flexible Box,写法为:display:flex(旧版:display: -webkit-box) 在Webkit内核下,需要加-webkit前缀: .box{ di ...
- flex 弹性盒模型的一些例子；
1.垂直居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
随机推荐
- 为代码减负之<二>存储过程（SQL）
在上篇博客中介绍到了触发器的使用,而且当中也提到了触发器是个特殊的存储过程,那么什么是存储过程呢?他们 两个又究竟有什么差别呢? 事实上最基本的差别就是,触发器是当满足条件时系统自己主动运行的,而存储 ...
- 一个数据表对象(NSManagedObject)加入排序
eg:数据库表对象 @interface Meditation : NSManagedObject @property (nonatomic, retain) NSString * order;//用 ...
- RQNOJ PID3 / Jam的计数法
题目描述 Jam是个喜欢标新立异的科学怪人.他不使用阿拉伯数字计数,而是使用小写英文字母计数,他觉得这样做,会使世界更加丰富多彩.在他的计数法中,每个数字的位数都是相同的(使用相同个数的字母),英文字 ...
- C语言学习_查找三分之二
查找三分之二: #include <stdio.h> #define M 10 int main(void) { int front, near, mid1, mid2; int n; i ...
- MVC中，视图的Layout使用
本文目标 1.能够重用Razor模板进行页面的组件化搭建 本文目录 1.母板页_Layout.cshtml 2.用户自定义控件 3.默认Layout引用的使用(_ViewStart.cshtml) 1 ...
- 百度地图API显示多个标注点,解决提示信息问题以及给标注增加地图旁的文字连接提示的另一种解决办法
原文:百度地图API显示多个标注点,解决提示信息问题以及给标注增加地图旁的文字连接提示的另一种解决办法 公司的网站改版要求在一个页面显示百度地图.上面要同时显示很多标注点,标注点当然要有提示信息嘛,提 ...
- Android checkCallingPermission()方法返回值问题
Android开发检查权限时,发现调用checkCallingPermission()总是返回值-1,而Binder.getCallingPid() == Process.myPid()又总是返回tr ...
- 【视频】零基础学Android开发：蓝牙聊天室APP（二）
零基础学Android开发:蓝牙聊天室APP第二讲 2.1 课程内容应用场景 2.2 Android UI设计 2.3 组件布局:LinearLayout和RelativeLayout 2.4 Tex ...
- C++ ofstream和ifstream具体的方法和C语言file说明
ofstream是从内存到硬盘,ifstream是从硬盘到内存,事实上所谓的流缓冲就是内存空间; 在C++中,有一个stream这个类,全部的I/O都以这个"流"类为基础的,包含我 ...
- Asp.net 4.0，首次请求目录下的文件时响应很慢
原文:Asp.net 4.0,首次请求目录下的文件时响应很慢 1. 问题起因2. 尝试过的处理思路3. 解决方法 1. 问题起因 一个从VS2003(.Net Framework 1.1)升级到.ne ...