CSS-flex|gird 布局
网页布局.css
*{
box-sizing: border-box;
}
/* flex弹性布局 */
#flex-container {
display: flex;
flex-direction: row;
border: 3px solid red;
}
#flex-container > .flex-item {
flex: auto;
border: 1px solid green;
}
#flex-container > .raw-item {
width: 5rem;
}
/* https://developer.mozilla.org/zh-CN/docs/Glossary/Grid */
/* grid网格布局 */
.wrapper{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px;
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.wrapper > div{
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
/* 媒体查询 */
/* https://www.w3cschool.cn/css3/css3-mediaqueries.html */
/* https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media */
@media screen and (min-width: 480px) {
/* 屏幕尺寸小480px时背景色变化 */
body {
background-color: lightgreen;
}
}
html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页布局-Flex</title>
<link rel="stylesheet" href="./网页布局.css">
</head>
<body>
<!-- flex弹性布局 -->
<div id="flex-container">
<div class="flex-item" id="flex">Flex box (click to toggle raw box)</div>
<div class="raw-item" id="raw">Raw box</div>
</div>
<!-- grid网格布局 -->
<div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
<div>Six</div>
<div>Seven</div>
<div>Eight</div>
</div>
</body>
</html>
CSS-flex|gird 布局的更多相关文章
- CSS Flex弹性布局
关于css3的flex布局,阮一峰老师的文章写的清晰易懂又全面,这里附上链接http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_s ...
- css flex弹性布局学习总结
一.简要介绍 flex( flexible box:弹性布局盒模型),是2009年w3c提出的一种可以简洁.快速弹性布局的属性. 主要思想是给予容器控制内部元素高度和宽度的能力.目前已得到以下浏览器支 ...
- 87.CSS Flex 弹性盒模型布局教程（共用的css在48篇文章gird）
CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 dis ...
- CSS flex 布局快速入门
以前已经学过flex了,一直没做笔记,现在做下笔记再回忆下. 首先,flex布局的迷之属性们,如果一知半解,机械记忆的话,那不到半个月基本忘光光.先感受一下这12个flex布局属性,是不是很“迷”人. ...
- flex.css声明式布局
flex.css能完美的运行在移动端的各种浏览器,甚至能运行在ie10+的各种PC端浏览器中 flex和data-flex flex.css 有两个版本,一个是flex.css一个是data-flex ...
- css进阶之二：flex弹性布局
布局模式是指一个盒子与其兄弟.祖先盒的关系决定其尺寸与位置的算法.css2.1中定义了四种布局模式,分别是块布局.行内布局.表格布局.以及定位布局.css3引入了新的布局模式Flexbox布局,灵活度 ...
- CSS Flex布局完全指南 #flight.Archives002
Title/CSS Flex布局完全指南 #flight.Archives002 序(from Ruanyf) : 网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模 ...
- CSS弹性盒模型flex在布局中的应用
× 目录 [1]元素居中 [2]两端对齐 [3]底端对齐[4]输入框按钮[5]等分布局[6]自适应布局[7]悬挂布局[8]全屏布局 前面的话 前面已经详细介绍过flex弹性盒模型的基本语法和兼容写法, ...
- css flex布局，小程序flex布局，垂直居中完美解决
flex弹性布局,很好的解决了垂直居中的问题,上代码: wxml: <view class='container'> <view class='item item1'>item ...
- 整理CSS中display flex（布局利器）
关于display:flex布局,有人了解颇深,我也是看着别人的东西学习的. display:flex的布局是什么.基本概念之类的我根本就不了解,只会用.每次看到概念之类的东西,我都是扫一眼就过去. ...
随机推荐
- O(1)求解自然数异或和
序 又是一个不眠之夜. 求: \[f_i=1 \bigoplus 2 \bigoplus 3 \bigoplus...\bigoplus (i-1) \bigoplus i \] 思路1:周期分析 \ ...
- day14总结
装饰器 """1.什么是装饰器 器指的是工具/功能 装饰指的是为被装饰对象添加额外的功能 大白话:定义装饰器就是定义了一个函数,该函数就是用来为其他函数添加额外的功能的 ...
- day46 mysql进阶
目录 一.约束条件 1 default默认值 2 unique唯一 2.1 单列唯一 2.2 联合唯一 3 primary key主键 3.1 主键的基本使用 3.2 主键的特性 4 auto_inc ...
- Ubuntu systemctl 查看管理系统启动项
Ubuntu systemctl 查看系统启动项 列出所有启动项: sudo systemctl list-unit-files 会列出开启的和未开启的: 使用grep过滤一下开启的grep enab ...
- 数据可视化之powerBI基础（五）深入了解Power BI的跨页钻取交互
https://zhuanlan.zhihu.com/p/79036123 在 PowerBI 中还有一种有趣的交互方式:跨页钻取.它可以通过点击某个数据点,钻取到另一个页面,进一步展示该数据点的详细 ...
- bzoj2697特技飞行*
bzoj2697特技飞行 题意: N个单位时间,每个单位时间可以进行一项特技动作,可选的动作有K种,每种动作有一个刺激程度Ci.每次动作的价值为(距上次该动作的时间)*Ci,若为第一次进行该动作,价值 ...
- 六十来行python代码完成一个文件分类器
你的桌面是否像这样的一样被各种文件给堆满了,但是每一个文件又不清楚是否后面还有作用,也不敢删除,自己一个一个转移又太麻烦了.没关系,今天我带大家用python一起来做一个文件归类器,一键进行 ...
- 直接在x86硬件上显示图片（无os）
1 任务 为了学习计算机底层和os,我给自己布置了一个任务:在x86硬件上,使用c和nasm来显示一张bmp图片.完成这个任务,前后估计花了2个月的业余时间. 这个任务涉及了很多知识点,包括:启动区. ...
- Spring Cloud Alibaba教程：Nacos
Nacos是什么 Nacos 致力于帮助您发现.配置和管理微服务,它 提供了一组简单易用的特性集,帮助您快速实现动态服务发现.服务配置.服务元数据及流量管理. 注册中心 nacos-server 可以 ...
- Python网络爬虫四大选择器用法原理总结
前几天小编连续写了四篇关于Python选择器的文章,分别用正则表达式.BeautifulSoup.Xpath.CSS选择器分别抓取京东网的商品信息.今天小编来给大家总结一下这四个选择器,让大家更加深刻 ...