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;
}
最新文章
- html5 canvas 绘制太极图
- BZOJ1798: [Ahoi2009]Seq 维护序列seq[线段树]
- 百度地图api 标注的图标不显示问题
- n的阶乘高精度算法【阶乘】
- NSMutableAttributedString 富文本的使用
- Jackson 框架,轻易转换JSON(转)
- HDU2669 第六周练习I题(扩展欧几里算法)
- linux下mysql连接jar包的位置在哪里?
- php 1到100累加 新方法
- [笔记]A*寻路算法初探
- 消息队列NetMQ 原理分析4-Socket、Session、Option和Pipe
- JavaWeb笔记一、Servlet 详解
- 我发起并创立了一个 .Net 平台上的 Web 业务系统 基础库 开源项目 WebEasy
- 爬取微博的数据时别人用的是FM.view方法传递html标签那么jsoup怎么解析呢
- dubbo源码解析-spi(一)
- 机器学习入门-K-means算法
- 【比赛游记】THUSC2018酱油记
- 【bzoj 2716】[Violet 3]天使玩偶 (CDQ+树状数组)
- oradebug 的学习 一
- 【python】Python: Enum枚举的实现