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布局实例的更多相关文章

  1. CSS3动画属性和flex弹性布局各个属性

    [CSS3动画的使用] 1.声明一个关键帧(动画): @keynames name{ from{} to{} } 每个阶段的写法: ①可以直接使用from-to的写法 ②可以设置0%-100%的写法, ...

  2. 两点补充——CSS3新属性以及弹性布局

    CSS3 新属性 一.[ CSS3新增属性前缀 ] 1.-webkit-:chrome/safari 2.-moz-:火狐 3.-mo-:IE 4.-o-: Opera 欧朋 二 .[CSS 长度单位 ...

  3. CSS3弹性盒子(Flex Box)

    CSS3弹性盒子(Flex Box) 一.容器的属性:flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content 1 ...

  4. 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转

    基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...

  5. css3新属性position: sticky 一分钟实现 导航栏悬停功能

    css3新属性position: sticky 一分钟实现 导航栏悬停功能 前言 正文 前言 想必很多前端小伙伴经常会在开发中遇到这样一个需求,就是在下划时,导航栏悬停在屏幕最上方,例如咱们的csdn ...

  6. CSS3新属性注释及实例

    这里把CSS3的新属性单独拿出来讲解一下: border-radius 属性用于创建圆角 div { border:2px solid; border-radius:25px; -moz-border ...

  7. 使用css3新属性clip-path制作小图标

    一般一个网页上面,或多或少都会用到一些小图标,展示这些小图标的方法有很多种.最简单的做法就是将UI图上面的每个小图标都保存为图片,一个小图标就一张图片.但这也是比较笨的方法,因为浏览器同一时间最多加载 ...

  8. css3新属性@ text-shadow

    text-shodow是css3的新属性,可以利用这个属性使字体更有立体感,还可以创造有趣的效果. 1.语法形式:text-shadow : x-offset(x轴偏移量) y-offset(y轴偏移 ...

  9. css3新属性的总结

    今天继续总结css3的一些css3新样式,先列一个简单的提纲,重要的还是圆角.阴影.渐变.文字缩略,最最重要的是过度transition,变换transform和animation圆角阴影渐变 圆形渐 ...

随机推荐

  1. (转)JMS简明学习教程

    转:http://www.cnblogs.com/jjj250/archive/2012/08/08/2628552.html 基础篇 JMS是应用系统或组件之间相互通信的应用程序接口,利用它,我们可 ...

  2. sublime text3配置c++环境和一些插件

    目录 Sublime Text 3是一个轻量级文本编辑器 下载sublime text 3: 安装MinGW 配置环境变量 win下行编译运行C/C++文件 Build你的C++System~ 快捷键 ...

  3. [转] bae中thinkphp的REWRITE 正确配置方法

    URL_MODEL =2下. 官方的:app.conf不能用,害人呀.. 留意以下红色部分,正则要分开来写,坑爹的 正确的配置: handlers: handlers: - expire : .jpg ...

  4. php5模块pdo、pdo_mysql、mysqli的添加

    一.环境LAMP都是源码安装,PHP安装的时候没有配置pdo_mysql和mysqli,pdo是php5默认带的.PHP5的源码都在,只需要把php5的模块功能扩展就可以了. php源码目录:/usr ...

  5. C#内嵌Python架构实现

    C#通过IronPython内嵌Python脚本,实现了对业务逻辑抽象及判断,适合在大量订单需要进行校验的场合使用. 比如,贷款时会对用户进行核查,核查过程可能存在多个节点,并且节点可能会随着政策而不 ...

  6. 2019基于python的网络爬虫系列,爬取糗事百科

    **因为糗事百科的URL改变,正则表达式也发生了改变,导致了网上许多的代码不能使用,所以写下了这一篇博客,希望对大家有所帮助,谢谢!** 废话不多说,直接上代码. 为了方便提取数据,我用的是beaut ...

  7. USACO2007 The Bale Tower /// DFS oj21160

    题目大意: 给出N个捆包,每个捆包有相应的长度和宽度,要求堆叠捆包,使下方的捆包长宽永远大于上方的捆包的长宽. Input Multiple test case. For each case: * L ...

  8. Size Assert

    判断返回内容的大小

  9. kubeadm生成的token重新获取

    当你的token忘了或者过期,解决办法如下: 1.先获取token #如果过期可先执行此命令kubeadm token create #重新生成token#列出tokenkubeadm token l ...

  10. flink on yarn启动失败

    我启动hadoop on yarn 集群后 [root@node1 flink-1.6.1]# ./bin/yarn-session.sh -n 2 -jm 1024 -tm 1024 报的如下错误 ...