flex常见布局
一,常见圣杯布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 圣杯布局 */
body{
margin: 0;
padding: 0;
display: flex;
flex-direction: column;/* 灵活的项目将垂直显示,正如一个列一样 */
}
header{
flex: 0 0 50px;
background-color: aliceblue;
align-items: center;
}
footer{
flex: 0 0 200px;
background-color: dimgray;
}
.content{
display: flex;
width: 70%;
margin: 0 auto;
background: beige;
height: auto; }
.square1{
border: aqua 1px solid;width: 100px; height: 100px;/* 内容效果 */
}
.square2{
border: aqua 1px solid;width: 700px; height: 100px;/* 内容效果 */ }
.parcel2{
display: flex;
flex-wrap: wrap;
}
</style>
</head>
<body>
<!--
页面从上到下为头部、中部、脚部;头部、脚部定高,不可伸缩;中部高度自适应。
-->
<header><h1>阿呆云[-].COM</h1></header> <div class="content">
<div class="parcel">
<div class="square1" >方块1</div>
<div class="square1" >方块1</div>
<div class="square1" >方块1</div>
<div class="square1" >方块1</div>
<div class="square1" >方块1</div>
<div class="square1" >方块1</div>
</div>
<div class="parcel2">
<div class="square2" >方块2</div>
</div>
</div> <footer></footer>
</body>
</html>
效果图:
二,快资讯页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
display: flex;
margin: 0;
padding: 0;
flex-wrap: wrap;
}
.box{
display: flex;
margin: 0 auto;
width: 80%;
height: 1000px;
background: #696969;
}
.top{
width: 100%;
height: 50px;
background: #00FFFF;
text-align: center;
}
.left{
width: 30%;
background: #F5F5DC;
}
</style>
</head>
<body>
<div class="top">导航栏</div>
<div class="box">
<div class="left">
略缩内容
</div>
<div class="right">
展开内容
</div>
</div> </body>
</html>
效果图:
flex常见布局的更多相关文章
- 几种常见布局的flex写法
flex布局目前基本上兼容主流的浏览器,且实现方式简单.我整理了flex的一些知识点,并且总结归纳了几种常见布局的flex写法 flex基础知识点 flex-grow和flex-shrink相关计算 ...
- flex大法:一网打尽所有常见布局
flex全称Flexible Box模型,顾名思义就是灵活的盒子,不过一般都叫弹性盒子,所有PC端及手机端现代浏览器都支持,所以不用担心它的兼容性,有了这玩意,妈妈再也不用担心我们的布局. 先简单介绍 ...
- flex弹性布局
Flex 布局教程:语法篇 原文地址:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool 作者: ...
- css常见布局方式
CSS常见布局方式 以下总结一下CSS中常见的布局方式.本人才疏学浅,如有错误,请留言指出. 如需转载,请注明出处:CSS常见布局方式 目录: 使用BFC隐藏属性 float + margin abs ...
- CSS常见布局问题整理
实现div的水平居中和垂直居中 多元素水平居中 实现栅格化布局 1. 实现div的水平居中和垂直居中 实现效果: 这大概是最经典的一个题目了,所以放在第一个. 方法有好多, 一一列来 主要思路其实就是 ...
- css CSS常见布局解决方案
CSS常见布局解决方案说起css布局,那么一定得聊聊盒模型,清除浮动,position,display什么的,但本篇本不是讲这些基础知识的,而是给出各种布局的解决方案.水平居中布局首先我们来看看水平居 ...
- 前端进阶系列(二):css常见布局解决方案
水平居中布局 margin+定宽 <div class="parent"> <div class="child">Demo</di ...
- CSS3新属性之---flex box布局实例
flex box布局实例 flex的强大之处在于不管什么布局,几行命令即可实现 /*本节模板div元素(代表骰子的一个面)是Flex容器,span元素(代表一个点)是Flex项目.如果有多个项目,就要 ...
- css进阶之二:flex弹性布局
布局模式是指一个盒子与其兄弟.祖先盒的关系决定其尺寸与位置的算法.css2.1中定义了四种布局模式,分别是块布局.行内布局.表格布局.以及定位布局.css3引入了新的布局模式Flexbox布局,灵活度 ...
随机推荐
- Github挂载大文件解决方案
正常情况下,我们上传代码之类的文本文件,都不会太大,可以直接通过[Upload Files]选项直接上传. 但是这样的操作仅限文件大小在25MB以内. 如果你选择的文件超过25MB,那么Github会 ...
- 用故事说透 HTTPS
本文来自素燕公众号,原文地址:用故事说透 HTTPS 故事中的主演:小华今年上大一,这是她第一次离开父母,独自一人到北京上学.今天妈妈的生日,想了想要给妈妈一个祝福,便给妈妈发了条消息:妈妈收到这条消 ...
- inux 资源监控分析-pidstat
pidstat是sysstat工具的一个命令,用于监控全部或指定进程的cpu.内存.线程.设备IO等系统资源的占用情况.pidstat首次运行时显示自系统启动开始的各项统计信息,之后运行pidstat ...
- 形如 T(n) = a * T(n/b) + f(n) 的时间复杂度计算方法
形如 T(n) = a * T(n/b) + f(n) 的时间复杂度计算方法 有一种方法叫做主方法(Master method)是用来专门计算这种形式的时间复杂度的,方法具体如下: 下边举例进行说明: ...
- 关于使用DB2数据库的项目后台报-420错误码的问题
### Error querying database. Cause: com.ibm.db2.jcc.am.SqlDataException: DB2 SQL Error: SQLCODE=-4 ...
- 基于MbedTLS的AES加密实现,含STM32H7和STM32F4的实现例程
说明: 1.mbedTLS的前身是PolarSSL,开源免费. 主要提供了的SSL/TLS支持(在传输层对网络进行加密),各种加密算法,各种哈希算法,随机数生成以及X.509(密码学里公钥证书的格式标 ...
- 从. NET 和 Java 之争谈 IT 这个行业
一.有些事情难以回头 开篇我得表名自己的立场:.NET JAVA 同时使用者, 但更加偏爱. NET. 原因很简单 NET 语言更具开放性, 从开源协议和规范可以看出; 语言更具优势严谨; 开发工具 ...
- WPF 后台模拟界面触摸点击
win32Api提供一种方法,模拟用户触摸点击 InjectTouchInput function InitializeTouchInjection InjectTouchInput 在模拟添加触摸输 ...
- Mysql悲观锁乐观锁区别与使用场景
本人免费整理了Java高级资料,涵盖了Java.Redis.MongoDB.MySQL.Zookeeper.Spring Cloud.Dubbo高并发分布式等教程,一共30G,需要自己领取.传送门:h ...
- java核心API
---恢复内容开始--- Javase01 day01 关于String: String是不可变对象,java.lang.String使用了final修饰,不能被继承: 字符串一旦创建永远无法改变,但 ...