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的布局是什么.基本概念之类的我根本就不了解,只会用.每次看到概念之类的东西,我都是扫一眼就过去. ...
随机推荐
- 03 Vue实例成员
Vue实例 1.el:实例 new Vue({ el: '#app' }) // 实例与页面挂载点一一对应 // 一个页面中可以出现多个实例对应多个挂载点 // 实例只操作挂载点内部内容 2.data ...
- web常用的unicode字符集
也不知道出处
- SQLAlchemy（三)：外键、连表关系
SQLAlchemy03 /外键.连表关系 目录 SQLAlchemy03 /外键.连表关系 1.外键 2.ORM关系以及一对多 3.一对一的关系 4.多对多的关系 5.ORM层面的删除数据 6.OR ...
- OSI物理层之数据通信基础知识
@ 目录 物理层的基本概念 物理层的主要任务 数据通信的基础知识 典型的数据通信模型 相关术语 信道的基本概念 基带(base band)信号和带通(band pass)信号 几种最基本的调制方法 常 ...
- Linux 通过源代码安装和编译程序
Linux源代码安装在平常工作学习中经常用到,总结下步骤↓↓↓ 第一步:#mount /dev/cdrom/mnt (挂载一个软盘) 第二步:手动安装httpd-2.4.25.tar.gz 依赖关系包 ...
- Istio安全-认证(istio 系列七)
Istio安全-认证 目录 Istio安全-认证 认证策略 配置 自动mutual TLS 全局启用istio的mutual TLS STRIC模式 卸载 针对单个命名空间或负载启用mutual TL ...
- C#数据结构与算法系列（二十二）：快速排序算法（QuickSort）
1.介绍 快速排序(QuickSort)是对冒泡排序的一种改进,基本思想是:通过一趟排序将要排序的数据分割成独立的两部分, 其中一部分的所有数据都比另一部分的所有数据都要小,然后再按此方法对这两部分数 ...
- 如何使用ABP进行软件开发（2） 领域驱动设计和三层架构的对比
简述 上一篇简述了ABP框架中的一些基础理论,包括ABP前后端项目的分层结构,以及后端项目中涉及到的知识点,例如DTO,应用服务层,整洁架构,领域对象(如实体,聚合,值对象)等. 笔者也曾经提到,AB ...
- Linux/Docker 中使用 System.Drawing.Common 踩坑小计
前言 在项目迁移到 .net core 上面后,我们可以使用 System.Drawing.Common 组件来操作 Image,Bitmap 类型,实现生成验证码.二维码,图片操作等功能.Syste ...
- R语言基本绘图-plot参数：标题，坐标轴和颜色
标题 plot(c(1:2,2:4),main = "这是主标题",sub = "这是副标题",xlab = "这是x轴", ylab = ...