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的布局是什么.基本概念之类的我根本就不了解,只会用.每次看到概念之类的东西,我都是扫一眼就过去. ...
随机推荐
- web网页动态分享facebook和twitter
介绍 facebook分享 http://www.facebook.com/sharer.php?t=${text}u=encodeURIComponent('静态html') twitter分享 h ...
- EM算法的收敛性
https://blog.csdn.net/kevinoop/article/details/80522477
- ASP.NET Core端点路由 作用原理
端点路由(Endpoint Routing)最早出现在ASP.NET Core2.2,在ASP.NET Core3.0提升为一等公民. Endpoint Routing的动机 在端点路由出现之前,我们 ...
- Cyber Security - Palo Alto Security Policies(1)
Security policies: Enforcing network traffic by configuring rules of what is allowed or denied to co ...
- Python Ethical Hacking - MODIFYING DATA IN HTTP LAYER（1）
MODIFYING DATA IN HTTP LAYER Edit requests/responses. Replace download requests. Inject code(html/Ja ...
- 【JUnit测试】总结
什么是Junit? Junit是xUnit的一个子集,在c++,paython,java语言中测试框架的名字都不相同 xUnit是一套基于测试驱动开发的测试框架 其中的断言机制:将程序预期的结果与程序 ...
- 怎么理解Python迭代器与生成器？
怎么理解Python迭代器与生成器?在Python中,使用for ... in ... 可以对list.tuple.set和dict数据类型进行迭代,可以把所有数据都过滤出来.如下: ...
- 解决android studio Gradle无法同步问题
打开根目录build.gradle buildscript { repositories { // 添加阿里云 maven 地址 maven { url 'http://maven.aliyun.co ...
- 带你理解Lock锁原理
同样是锁,先说说synchronized和lock的区别: synchronized是java关键字,是用c++实现的:而lock是用java类,用java可以实现 synchronized可以锁住代 ...
- e的存在性证明和计算公式的证明
\(\quad\quad前言\quad\quad\\\) \(此证明,改编自中科大数分教材,史济怀版\\\) \(中科大教材,用的是先固定m,再放大m,跟菲赫金哥尔茨的方法一样.\\\) \(而我这里 ...