网页布局.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 布局的更多相关文章

  1. CSS Flex弹性布局

    关于css3的flex布局,阮一峰老师的文章写的清晰易懂又全面,这里附上链接http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_s ...

  2. css flex弹性布局学习总结

    一.简要介绍 flex( flexible box:弹性布局盒模型),是2009年w3c提出的一种可以简洁.快速弹性布局的属性. 主要思想是给予容器控制内部元素高度和宽度的能力.目前已得到以下浏览器支 ...

  3. 87.CSS Flex 弹性盒模型布局教程（共用的css在48篇文章gird）

    CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 dis ...

  4. CSS flex 布局快速入门

    以前已经学过flex了,一直没做笔记,现在做下笔记再回忆下. 首先,flex布局的迷之属性们,如果一知半解,机械记忆的话,那不到半个月基本忘光光.先感受一下这12个flex布局属性,是不是很“迷”人. ...

  5. flex.css声明式布局

    flex.css能完美的运行在移动端的各种浏览器,甚至能运行在ie10+的各种PC端浏览器中 flex和data-flex flex.css 有两个版本,一个是flex.css一个是data-flex ...

  6. css进阶之二：flex弹性布局

    布局模式是指一个盒子与其兄弟.祖先盒的关系决定其尺寸与位置的算法.css2.1中定义了四种布局模式,分别是块布局.行内布局.表格布局.以及定位布局.css3引入了新的布局模式Flexbox布局,灵活度 ...

  7. CSS Flex布局完全指南 #flight.Archives002

    Title/CSS Flex布局完全指南 #flight.Archives002 序(from Ruanyf) : 网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模 ...

  8. CSS弹性盒模型flex在布局中的应用

    × 目录 [1]元素居中 [2]两端对齐 [3]底端对齐[4]输入框按钮[5]等分布局[6]自适应布局[7]悬挂布局[8]全屏布局 前面的话 前面已经详细介绍过flex弹性盒模型的基本语法和兼容写法, ...

  9. css flex布局，小程序flex布局，垂直居中完美解决

    flex弹性布局,很好的解决了垂直居中的问题,上代码: wxml: <view class='container'> <view class='item item1'>item ...

  10. 整理CSS中display flex（布局利器）

    关于display:flex布局,有人了解颇深,我也是看着别人的东西学习的. display:flex的布局是什么.基本概念之类的我根本就不了解,只会用.每次看到概念之类的东西,我都是扫一眼就过去. ...

随机推荐

  1. 【XCTF】Cat

    标签:宽字节.PHP.Django.命令执行 解题过程 目录扫描没有发现任何可疑页面. 测试输入许多域名,均没有反应:输入ip地址得到回显. 猜测为命令执行,尝试使用管道符拼接命令. 测试:|.&am ...

  2. Python-字符串内容检测

    str.isnumeric():检测字符串是否只由数字组成 str.isalpha():检测字符串是否只由字母组成 str.islower():检测字符串中所有的字母是否都为小写 str.isuppe ...

  3. 数据可视化之DAX篇（十三）熟练使用FORMAT函数，轻松自定义数据格式

    https://zhuanlan.zhihu.com/p/64420449 在进行数据分析时,需要对某个数据进行格式调整的情形经常会遇到,在DAX中有一个专门进行格式调整的函数:FORMAT. 其实对 ...

  4. 操作句柄Handle（7）

    可以将Handle理解成访问对象的一个“句柄”.垃圾回收时对象可能被移动(对象地址发生改变),通过Handle访问对象可以对使用者屏蔽垃圾回收细节. Handle涉及到的相关类的继承关系如下图所示. ...

  5. Redis之对象

    1.对象的类型与编码 Redis使用对象来表示数据库中的键和值,每次我们在Redis的数据库中新创建一个键值对,我们至少会创建两个对象,一个键对象,另一个值对象. 每个对象都由一个redisObjec ...

  6. 数据结构 | 30行代码，手把手带你实现Trie树

    本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是算法和数据结构专题的第28篇文章,我们一起来聊聊一个经典的字符串处理数据结构--Trie. 在之前的4篇文章当中我们介绍了关于博弈论的 ...

  7. 10种常见OOM分析——手把手教你写bug

    点赞+收藏 就学会系列,文章收录在 GitHub JavaKeeper ,N线互联网开发必备技能兵器谱,笔记自取 在<Java虚拟机规范>的规定里,除了程序计数器外,虚拟机内存的其他几个运 ...

  8. Java应用服务器之tomcat会话复制集群配置

    会话是识别用户,跟踪用户访问行为的一个手段,通过cookie(存在客户端)或session(存在服务端)来判断本次请求是那个客户端发送过来:常用的会话保持有绑定会话,就是前边我们聊的在代理上通过算法或 ...

  9. 无法定位序数242于动态链接库，Anaconda3\Library\bin\mkl_intel_thread

    python.exe-找不到序数:无法定位序数242与动态链接库libiomp5md.dll上.或无法定位程序输入点 mkl_dft_create_descriptor_md于动态链接库 Ancond ...

  10. LevelDB，你好~

    LevelDB,你好~ 上篇文章初识:LevelDB介绍了啥是LevelDB,LevelDB有啥特性,以及Linux环境下编译,使用及调试方法. 这篇文章的话,算是LevelDB源码学习的开端吧,主要 ...