CSS3新属性之---flex box布局实例
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圆角阴影渐变 圆形渐 ...
随机推荐
- AcWing 139. 回文子串的最大长度 hash打卡
如果一个字符串正着读和倒着读是一样的,则称它是回文的. 给定一个长度为N的字符串S,求他的最长回文子串的长度是多少. 输入格式 输入将包含最多30个测试用例,每个测试用例占一行,以最多1000000个 ...
- PHP fpassthru() 函数
定义和用法 fpassthru() 函数输出文件指针处的所有剩余数据. 该函数将给定的文件指针从当前的位置读取到 EOF,并把结果写到输出缓冲区. 语法 fpassthru(file) 参数 描述 f ...
- [NOIP模拟测试10]辣鸡(ljh) 题解
首先计算块内贡献,很显然是$(x_2-x_1)*(y_2-y_1)*2$. 然后考虑矩形之间的贡献,sort一遍分类讨论$n^2$暴力即可. 注意考虑边界情况是否能多两个,以及角对角的情况. 另外,排 ...
- 其它课程中的python---5、Pandas处理数据和读取数据
其它课程中的python---5.Pandas处理数据和读取数据 一.总结 一句话总结: 记常用和特例:慢慢慢慢的就熟了,不用太着急,慢慢来 库的使用都很简单:就是库的常用函数就这几个,后面用的时候学 ...
- div + css 边框 虚线
div + css 边框 虚线 dotted:[点线|有点的|点线式边框|点虚线] .introduce { border:1px dotted gray; margin:8px 5px 8px 10 ...
- C++——数据类型选择
1.数据类型选择推荐 2.数据类型相关代码注意 2.1 循环的int型注意是int 还是unsigned unsigned a=-1;(a=4294967295)
- 剑指offer——70n个骰子的点数
题目: 把n个骰子扔在地上,所有骰子朝上一面的点数之和为s.输入n,打印出s的所有可能的值出现的概率. 题解: 使用两个数组存每次投的点数 void theProbability(const int ...
- JSoup安装
要运行任何jsoup示例,需要先安装好jsoup相关Jar包.到目前为止(2017年05月),jsoup的当前版本是1.10.2.0.安装jsoup主要有三种方法: 通过Maven的pom.xml配置 ...
- Java中的注解是如何工作的？
自Java5.0版本引入注解之后,它就成为了Java平台中非常重要的一部分.开发过程中,我们也时常在应用代码中会看到诸如@Override,@Deprecated这样的注解.这篇文章中,我将向大家讲述 ...
- 利用JFileChooser实现文件选择对话框
简单的文件选择对话框: package mypackage;/** * 打开文件和存储文件 */import java.awt.BorderLayout;import java.awt.Contain ...