flex box布局实例
flex的强大之处在于不管什么布局，几行命令即可实现
/*本节模板div元素（代表骰子的一个面）是Flex容器，span元素（代表一个点）是Flex项目。如果有多个项目，就要添加多个span元素，以此类推。*/
<div class="box">
<span class="item"></span>
</div>骰子布局
单项目
.box {
display: flex;/*默认左上*/
justify-content: center;/*设置居中*/
justify-content: flex-end;/*设置右上*/
}
.box {
display: flex;
justify-content: center;/*+设置居中*/
align-items: center;/*垂直移动主轴*/
justify-content: flex-end;/*垂直移动右齐*/
align-items: flex-end;/*||垂直移动主轴*/
}双项目
.box {
display: flex;
flex-direction: column;/*+竖直*/
justify-content: space-between;
align-items: center;/*+居中*/
align-items: flex-end;/*||居右*/
}
/*倾斜*/
.box {
display: flex;
}
.item:nth-child(2) {
align-self: center;
}
.box {
display: flex;
justify-content: space-between;
}
.item:nth-child(2) {
align-self: flex-end;
}三项目
.box {
display: flex;
}
.item:nth-child(2) {
align-self: center;
}
.item:nth-child(3) {
align-self: flex-end;
}
##四项目<div class="box">
<div class="column">
<span class="item"></span>
<span class="item"></span>
</div>
<div class="column">
<span class="item"></span>
<span class="item"></span>
</div>
</div>
.box {
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
.column {
flex-basis: 100%;
display: flex;
justify-content: space-between;
}
##六项目.box {
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
.box {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: space-between;
}
##九项目.box {
display: flex;
flex-wrap: wrap;
}
---
## 二，网格布局
### 1.基本网格（类似bootstrap实现）<div class="Grid">
<div class="Grid-cell">...</div>
<div class="Grid-cell">...</div>
<div class="Grid-cell">...</div>
</div>
.Grid {
display: flex;
}
.Grid-cell {
flex: 1;
}
###2.百分比布局---某个网格的宽度为固定的百分比，其余网格平均分配剩余的空间。<div class="Grid">
<div class="Grid-cell u-1of4">...</div>
<div class="Grid-cell">...</div>
<div class="Grid-cell u-1of3">...</div>
</div>
.Grid {
display: flex;
}
.Grid-cell {
flex: 1;
}
.Grid-cell.u-full {
flex: 0 0 100%;
}
.Grid-cell.u-1of2 {
flex: 0 0 50%;
}
.Grid-cell.u-1of3 {
flex: 0 0 33.3333%;
}
.Grid-cell.u-1of4 {
flex: 0 0 25%;
}
### 3.圣杯布局---（Holy Grail Layout）一种最常见的网站布局<body class="HolyGrail">
<header>...</header>
<div class="HolyGrail-body">
<main class="HolyGrail-content">...</main>
<nav class="HolyGrail-nav">...</nav>
<aside class="HolyGrail-ads">...</aside>
</div>
<footer>...</footer>
</body>
/适应小屏幕/
@media (max-width: 768px) {
.HolyGrail-body {
flex-direction: column;
flex: 1;
}
.HolyGrail-nav,
.HolyGrail-ads,
.HolyGrail-content {
flex: auto;
}
}
.HolyGrail {
display: flex;
min-height: 100vh;
flex-direction: column;
}
header,
footer {
flex: 1;
}
.HolyGrail-body {
display: flex;
flex: 1;
}
.HolyGrail-content {
flex: 1;
}
.HolyGrail-nav, .HolyGrail-ads {
/ 两个边栏的宽度设为12em /
flex: 0 0 12em;
}
.HolyGrail-nav {
/ 导航放到最左边 /
order: -1;
}
### 4.输入框布局---前提示后按钮<div class="InputAddOn">
<span class="InputAddOn-item">...</span>
<input class="InputAddOn-field">
<button class="InputAddOn-item">...</button>
</div>
.InputAddOn {
display: flex;
}
.InputAddOn-field {
flex: 1;
}
### 5.悬挂布局---主栏的左侧或右侧，需要添加一个图片栏<div class="Media">
<img class="Media-figure" src="" alt="">
<p class="Media-body">...</p>
</div>
.Media {
display: flex;
align-items: flex-start;
}
.Media-figure {
margin-right: 1em;
}
.Media-figure {
margin-right: 1em;
}
.Media-body {
flex: 1;
}
###6. 固定低栏<body class="Site">
<header>...</header>
<main class="Site-content">...</main>
<footer>...</footer>
</body>
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}
###7. 流式布局---列数固定自动分行.parent {
width: 200px;
height: 150px;
display: flex;
flex-flow: row wrap;
align-content: flex-start;
}
.child {
box-sizing: border-box;
background-color: white;
flex: 0 0 25%;
height: 50px;
border: 1px solid red;
}
CSS3新属性之---flex box布局实例的更多相关文章
-
CSS3动画属性和flex弹性布局各个属性
[CSS3动画的使用] 1.声明一个关键帧(动画): @keynames name{ from{} to{} } 每个阶段的写法: ①可以直接使用from-to的写法 ②可以设置0%-100%的写法, ...
-
两点补充——CSS3新属性以及弹性布局
CSS3 新属性 一.[ CSS3新增属性前缀 ] 1.-webkit-:chrome/safari 2.-moz-:火狐 3.-mo-:IE 4.-o-: Opera 欧朋 二 .[CSS 长度单位 ...
-
CSS3弹性盒子（Flex Box）
CSS3弹性盒子(Flex Box) 一.容器的属性:flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content 1 ...
-
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...
-
css3新属性position: sticky 一分钟实现 导航栏悬停功能
css3新属性position: sticky 一分钟实现 导航栏悬停功能 前言 正文 前言 想必很多前端小伙伴经常会在开发中遇到这样一个需求,就是在下划时,导航栏悬停在屏幕最上方,例如咱们的csdn ...
-
CSS3新属性注释及实例
这里把CSS3的新属性单独拿出来讲解一下: border-radius 属性用于创建圆角 div { border:2px solid; border-radius:25px; -moz-border ...
-
使用css3新属性clip-path制作小图标
一般一个网页上面,或多或少都会用到一些小图标,展示这些小图标的方法有很多种.最简单的做法就是将UI图上面的每个小图标都保存为图片,一个小图标就一张图片.但这也是比较笨的方法,因为浏览器同一时间最多加载 ...
-
css3新属性@ text-shadow
text-shodow是css3的新属性,可以利用这个属性使字体更有立体感,还可以创造有趣的效果. 1.语法形式:text-shadow : x-offset(x轴偏移量) y-offset(y轴偏移 ...
-
css3新属性的总结
今天继续总结css3的一些css3新样式,先列一个简单的提纲,重要的还是圆角.阴影.渐变.文字缩略,最最重要的是过度transition,变换transform和animation圆角阴影渐变 圆形渐 ...
随机推荐
-
windows下编译及使用libevent
Libevent官网:http://libevent.org/ windows 7下编译: 编译环境: windows 7 + VS2010 (1)解压libevent到F:\libevent\lib ...
-
Service Locator 服务定位模式
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
-
从HashMap透析哈希表
##扯数据结构 先看一下哈希表的概念: 哈希表是一种数据结构,它可以提供快速的插入操作和查找操作.第一次接触哈希表,他会让人难以置信,因为它的插入和删除.查找都接近O(1)的时间级别.用哈希表,很多操 ...
-
BZOJ3939 : [Usaco2015 Feb]Cow Hopscotch
设f[i][j]表示到(i,j)的方案数,则有 $f[i][j]=\sum f[x][y](x<i,y<j,a[x][y]!=a[i][j])=\sum f[x][y](x<i,y& ...
-
【Linux】鸟哥的Linux私房菜基础学习篇整理（十）
1. at [-mldv] TIME/at -c 工作号码:单一工作调度.参数:-m:当at的工作完成后,即使没有输出信息,以email通知用户该工作已完成:-l:相当于atq,列出目前系统上面的所有 ...
-
PHP採集CSDN博客边栏的阅读排行
项目中要用到採集的数据,所以就先拿CSDN博客来试了试.这里使用Simple HTML DOM(官网)这个库,它可以方便的遍历HTML文档. <?php include_once('simple ...
-
探索Windows命令行系列(3)：命令行脚本基础
1.实用功能 1.1.为脚本添加注释 1.2.控制命令的回显 1.3.使用数学表达式 1.4.向脚本传递参数 2.使用变量 2.1.变量的命名及定义 2.2.调用变量 2.3.变量的作用域 3.结构语 ...
-
ORACLE数据库SQL优化 not in 与not exits
各个表的数据量: sys_file_convert_queue 65989sys_att_file 73061sys_att_main 84405sys_att_rtf_data 1507 优化前,执 ...
-
SNORT入侵检测系统
SNORT入侵检测系统 YxWa · 2015/10/09 10:38 0x00 一条简单的规则 alert tcp 202.110.8.1 any -> 122.111.90.8 80 (ms ...
-
用ActiveX 创建自己的comboBox 控件(二)
3.0 添加事件 3.1 添加OnSelChange 事件 当用户选中列表项的时候触发该事件.(不只是选择改变时触发,本次选择和上次相同时也触发): 添加完成后,在ActivexcomboBox.id ...