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布局,灵活度 ...
随机推荐
- Nginx配置实例-动静分离实例:搭建静态资源服务器
场景 Nginx入门简介和反向代理.负载均衡.动静分离理解: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/102790862 U ...
- 我也开源... React Native Messager
近期有空,玩转React Native. https://github.com/andyc365/ReactNativeMessager React Native Messager A React N ...
- java8新特性,你有用起来了吗?(精编)
2019年9月19日java13已正式发布,感叹java社区强大,经久不衰.由于国内偏保守,新东西总要放一放,让其他人踩踩坑,等稳定了才会去用.并且企业目的还是赚钱,更不会因为一个新特性去重构代码 ...
- Linux-3.14.12内存管理笔记【伙伴管理算法(4)】
此处承接前面未深入分析的页面释放部分,主要详细分析伙伴管理算法中页面释放的实现.页面释放的函数入口是__free_page(),其实则是一个宏定义. 具体实现: [file:/include/linu ...
- js效果 整理
整理中... 1.js获取页面及元素高度.宽度 其他参考文献:http://www.open-open.com/lib/view/open1420120422531.html js: 网页可见区域宽: ...
- 网站后台getshell
phpmyadmin后台Getshell 获取 web 绝对路径 select @@basedir; 检测是否有写入权限 show global variables like 'secure%' ## ...
- 请确保二进制储存在指定的路径中,或者调试他以检查该二进制或相关的DLL文件
出现问题原因: 编译socket.dll时,用到了openssl库. 使用libeay32.lib.ssleay32.lib生成socket.dll,就会报这样的错误 解决办法: 使用libeay32 ...
- Kingfisher
Kingfisher ima1.kf.setImage(with: url) 为了兼容macOS, IOS 通过协议定义了kf,实际上就是本身 KingfisherOptionsInfo 可以配置一些 ...
- Windows下RabbitMQ 的下载、配置、Java实现生产者和消费者例子
RabbitMQ是一个轻量级的消息代理中间件,支持多种消息通信协议,支持分布式部署,支持运行于多个操作系统,具有灵活.高可用等特性.RabbitMQ支持多种协议,其中最为重要的是高级消息队列协议(AM ...
- maven配置多个镜像
问题场景 1.国内访问maven默认远程中央镜像特别慢 2.用阿里的镜像替代远程中央镜像 3.大部分jar包都可以在阿里镜像中找到,部分jar包在阿里镜像中没有,需要单独配置镜像 解决方案 setti ...