CSS3 Flex布局和Grid布局
1 flex容器的六个属性
flex实现垂直居中:
<div class="box">
<span class="item"></span>
</div> .box {
display: flex;
justify-content: center;
align-items: center;
}
1 flex-direction
.box {
flex-direction: row | row-reverse | column | column-reverse;
} 2 flex-wrap 不换行,换行,换行且第一行在下方
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
} 3 flex-flow 前两项属性简写,默认 row nowrap
.box {
flex-flow: <flex-direction> || <flex-wrap>;
} 4 justify-content:主轴位置,左对齐,右对齐,居中,两端对齐,项目两侧距离相等
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
} 5 align-itemsY轴对齐:上,下,居中,基线,占满
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
} 6 align-content 带基线对齐
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
2 Flex元素属性
1 Flex元素的属性 1 flex:flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
/*
两个快捷值:auto (1 1 auto) 和 none (0 0 auto)
*/ 2 order属性,默认0,填写可设置元素顺序 3 align-self
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
3 Grid布局,将页面表示为栅格
CSS Grid 没有替换 flexbox 属性,尽可能保留了它的功能,可以在 Grid中使用justify-content和align-items等属性
<div class='wrapper'>
<div class='letter'>
1
</div>
<div class='letter'>
2
</div>
<div class='letter'>
3
</div>
<div class='letter'>
4
</div>
</div> .wrapper {
display: grid;
grid-template-columns: 1fr 1fr; @media screen and (min-width: 500px) {
grid-template-columns: 1fr 1fr 1fr;
}
/*当宽大于800px时显示为四列*/
@media screen and (min-width: 800px) {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
}
/**/
.wrapper {
display: grid;
grid-template-columns: 3fr 1fr 1fr;/*第一列显示为第二列的三倍*/
grid-template-rows: 1fr 3fr;
}
CSS3 Flex布局和Grid布局的更多相关文章
- CSS的flex布局和Grid布局
一.什么是 flex 布局 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这 ...
- 关于基本布局之——Grid布局
Gird布局 一.关于概念 网格布局(Grid)是一个很强大的 CSS 布局方案.它可以将网页划分为多个网格任意拼接的布局,可以灵活的运用并实现出多种布局形式. (grid和inline-grid区别 ...
- 前端页面布局之Grid布局
在讲布局前,先说两句题外话,写博时,突然想到了郭德纲说过的一个段子“说两个人骂架,不是你有理,你嗓门大,你唾沫星子崩我一脸,你就能骂赢,要看谁命长,过两年你死了,我站你坟头咋说咋是对的,你在那小匣里还 ...
- 学懂grid布局:这篇就够了(译)
上周发过一篇关于flex布局的文章,但发完之后我感觉我并没有写很多自己对flex布局的理解,因为原链接的作者的轮子实在是太强了,这里借用知乎大佬牛岱的话来说,当人家已经有足够好的轮子,你就不要试图,甚 ...
- 你需要的Grid布局入门教程
一.Grid布局概述 首先,Grid 布局与 Flex布局 有一定的相似性,都可以指定容器内部多个项目的位置.但是,Grid 布局远比 Flex 布局强大! Flex 布局是轴线布局,只能指定&quo ...
- 快速使用CSS Grid布局,实现响应式设计
常用Grid布局属性介绍 下面从一个简单Grid布局例子说起. CSS Grid 布局由两个核心组成部分是 wrapper(父元素)和 items(子元素). wrapper 是实际的 grid(网格 ...
- tkinter之grid布局管理器详解
在很久之前,我发过一篇<tkinter模块常用参数>,里面已经几乎涵盖了tkinter的大部分教程. 好吧,其实也就是上一篇而已啦. 所谓布局,就是指控制窗体容器中各个控件(组件)的位置关 ...
- 全新的css网站布局--Grid布局
Grid布局全新的css网站布局 CSS Grid 布局由两个核心组成部分是 wrapper(父元素)和 items(子元素). wrapper 是实际的 grid(网格),items 是 grid( ...
- 5分钟学会 CSS Grid 布局
欢迎加入前端交流群交流知识&&获取视频资料:749539640 这是一篇快速介绍网站未来布局的文章. Grid 布局是网站设计的基础,CSS Grid 是创建网格布局最强大和最简单的工 ...
随机推荐
- Ubuntu解决winscp连接不上虚拟机问题
前几天在配置虚拟机的时候,尝试用winscp连接Ubuntu,结果连接被拒绝.原因:Ubuntu的ssh服务需要自己安装和启动,在没启动之前,是无法连接上去的 解决方案: 我们可以输入:ssh loc ...
- vue axios 攻略
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 特点: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 ...
- I am too vegetable to all kill the 51nod problems on level 2 and 3.
51nod level 2:50/51 剩的一个题是切比雪夫距离转曼哈顿距离,现学的,bzoj3710过了,51nod上全wa了,很迷,可能有坑⑧. level 3:62/68 之前有的题有思路但是不 ...
- 算法竞赛入门经典5.1 从c到c++
这个章节主要是讲述了一些c++的特性,在这里面,对我用处最大的应该就是字符串吧.首先是getline,getchar,stringstream的使用了吧. 首先介绍这三个函数. 1. getline函 ...
- C++性能优化笔记
最近着手去优化项目中一个模块的性能.该模块是用C++实现,对大量文本数据进行处理. 一开始时,没什么思路,因为不知道性能瓶颈在哪里.于是借助perf工具来对程序进行分析,找出程序的性能都消耗在哪里了. ...
- Nginx 配置支持 WAF
WAF(Web Application Firewall),中文名叫做“Web应用防火墙” WAF的定义是这样的:Web应用防火墙是通过执行一系列针对HTTP/HTTPS的安全策略来专门为Web应用提 ...
- 【Linux】安装mysql之设置远程访问权限
最近重装了云主机,又要安装各种东西,其中一个就要设置mysql权限 出于学习方便,我在自己的云主机上安装的是phpstudy集成环境,所以要进入mysql控制台不能直接用“mysql -u root ...
- PHP 计算代码运行所占内存和时间
PHP 计算代码运行所占内存和时间 在PHP开发过程中,写出高质量的代码是很重要的,除了代码必须规范之外,性能也是不可忽视的一方面,那么如果检验一段代码是否高效呢,可通过以下一段php代码来粗略检测 ...
- 字符编码,ASCII、Unicode与UTF-8的理解
首先我们先要明白的两点是:1.计算机中的信息都是由二进制的0和1储存的:2.我们再计算机屏幕上看到的各种字符都是计算机系统按照一定的规则将二进制数字转换而来的. 一.基本概念. 1.字符集(chars ...
- Eclipse主题更换方法
1.打开Eclipse的Help->Eclipse Marketplace 2.在Find里搜索Eclipse Color Theme,点击Install按钮 3.打开Window->Pr ...