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圆角阴影渐变 圆形渐 ...
随机推荐
- JS互相调用
JS互相调用 例1: <html> <head> <meta charset="UTF-8"> <script type="te ...
- python使用threading获取线程函数返回值的实现方法
python使用threading获取线程函数返回值的实现方法 这篇文章主要介绍了python使用threading获取线程函数返回值的实现方法,需要的朋友可以参考下 threading用于提供线程相 ...
- Dubbo入门到精通学习笔记（一）：Dubbo对传统工程进行改造、注册中心安装(Zookeeper-3.4.6)、工程结构优化
文章目录 改造思路 样例工程:传统的单工程项目(edu-demo) 模型结构 思路 改成dubbo调用方式后的工程结构 部署环境规划 改造 愚公移山 迁移包 迁移页面: 迁移配置相关 新项目的主要作用 ...
- 专题：OpenSSL
一.常用操作 对称加密: openssl enc -e -aes256 -base64 -in goal.file -out result.file 加密,-base64 指使用 base64 編码 ...
- VMvare+Ubuntu环境安装
安装步骤参考:https://blog.csdn.net/stpeace/article/details/78598333 VMvare15秘钥:https://blog.csdn.net/felix ...
- Serializable 和Parcelable 详解
序列化:为了保存在内存中的各种对象的状态,并可以把保存的对象的状态读出来 安卓中实现序列化的接口有两个,一个是serializable,一个是parcelable. 一.实现序列化: 1.是可以将对象 ...
- span里面插入文字
.text-box span::before{ content:attr(data-text);}
- Android USB Host 与 HID 之通讯方法(bulkTransfer()与controlTransfer()方法使用)
转载地址:差满多乃几 Android USB Host与HID通讯,就目前Google Developer提供的方法有bulkTransfer()与controlTransfer(),看是简简单单的两 ...
- python之保留有限的历史记录(collections.deque)
1.deque(maxlen=N)创建一个固定长度的队列,当有新的记录加入而队列已经满时,会自动移除老的记录. from collections import deque q = deque(maxl ...
- keras 或 tensorflow 调用GPU报错：Blas GEMM launch failed
GPU版的tensorflow在模型训练时遇到Blas GEMM launch failed错误,或者keras遇到相同错误(keras 一般将tensorflow作为backend,如果安装了GPU ...