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的魅力--简洁优雅.随试之. /*容 ...
随机推荐
- js前后五年的时间日期万年历
<script src='bootstrap/js/jquery-1.11.2.min.js'></script>//引入JQUERY文件<div> <sel ...
- 22 pycharm如何将一段代码同时向左缩进一个tab键
在使用pycharm时,经常会需要多行代码同时缩进.左移,pycharm提供了快捷方式 1.pycharm使多行代码同时缩进 鼠标选中多行代码后,按下Tab键,一次缩进四个字符 2.pycharm使多 ...
- redis的 rdb 和 aof 持久化的区别
aof,rdb是两种 redis持久化的机制.用于crash后,redis的恢复. rdb的特性如下: Code: fork一个进程,遍历hash table,利用copy on write,把整个d ...
- python学习笔记之socket（第七天）
参考文档: 1.金角大王博客:http://www.cnblogs.com/alex3714/articles/5227251.html ...
- Mysql 导入CSV文件，中文内容乱码问题
项目中用到含有中文字段的数据CSV文件,导入Mysql数据中发现中文内容乱码. 分析原因:因为数据库字符编码问题引起. [1]创建utf-8字符集数据库 CREATE DATABASE db_name ...
- (Review cs231n) Spatial Localization and Detection（classification and localization）
重在图像的定位和检测的内容. 一张图片中只有一种给定类别标签的对象,定位则是图像中有对象框:再这些类中,每一个训练目标都有一个类和许多的图像内部对应类的位置选框. 猜想的仅是类标签,不如说它们是位置 ...
- vue脚手架3
跟脚手架2安装都一样,已经安装脚手架2的要执行下面的命令 ,先删除 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载 在执行下面的命令 ...
- pip使用国内源的配置方法
[root@ ~]# cat ~/.pip/pip.conf [global] index-url = https://pypi.douban.com/simple
- 智能化脚本autoit v3的简单了解
AutoIt v3 是一个类似 BASIC 脚本语言的免费软件, 它设计用于 Windows GUI(图形用户界面) 中进行自动化操作. 利用模拟键盘按键, 鼠标移动和窗口/控件的操作实现自动化任务. ...
- ipv4网络无访问权限
昨天折腾了一天这个网络受限问题,都没有得到解决,驱动精灵.电脑管家(我不用360).重置Winsock目录.网络重置.组策略控制台.重启路由器(学校的以太网,工作时间不好重置路由器)都用了个遍,一直都 ...