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圆角阴影渐变 圆形渐 ...
随机推荐
- CF 1076E Vasya and a Tree(线段树+树剖)
传送门 解题思路 首先按照每个修改时\(x\)的深度\(+d\)从大到小排序,然后按照深度分层,一层一层的修改,修改的时候就直接暴力修改子树,然后每做完一层把答案都取下来,因为以后的所有修改的深度都小 ...
- Openstack组建部署 — Glance Install
目录 目录 前文列表 Image service overview Openstack Image service包含的组件 Install and configure Prerequisites 先 ...
- idea无法引用jar包中的class
最近由eclipse换idea的过程中,出现了一个很奇妙的问题! 项目是maven+git+idea管理的,idea某次在使用的过程中,电脑死机重启后,发现无法引用jar包中的class.包括jdk中 ...
- linux top监控的使用
b : toggle highlight x : toggle sort row highlight shift + < > : switch sort row
- PAT_A1139#First Contact
Source: PAT A1139 First Contact (30 分) Description: Unlike in nowadays, the way that boys and girls ...
- 20140806 交换两个数 extern “C”用法
1.交换两个数 方法1.a+b有可能越界 a=a+b; b=a-b; a=a-b; 方法二.不会越界 a=a^b b=a^b; a=a^b; 2.extern "C"用法 ( ...
- hdu6354 /// 圆的相交
题目大意: 给定m r 初始圆盘以原点为圆心半径为r 给定m个圆的圆心(x,y) 半径r 保证m个圆互不相交且不会覆盖圆盘 用这m个圆来切割初始的圆盘求最后圆盘外围的长度 求圆与圆盘的交点 减去圆盘上 ...
- hadoop备战：hbase的分布式安装经验
配置HBase时,首先考虑的肯定是Hbase版本号与你所装的hadoop版本号是否匹配.这一点我在之前 的博客中已经说明清楚,hadoop版本号与hbase版本号的匹配度,那是官方提供的.以下的实验就 ...
- react-swiper 如何实现滑动小卡片的移动？
1.引入插件 import ReactSwipes from 'react-swipes'; import './swiperCard.css'; 2.代码构成 export default clas ...
- BigDecimal的操作工具类
import java.math.BigDecimal; /** * 进行BigDecimal对象的加减乘除,四舍五入等运算的工具类 * @author ameyume * */ public cla ...