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 是创建网格布局最强大和最简单的工 ...
随机推荐
- AngularJS 对象
AngularJS对象就像JavaScript对象 <!DOCTYPE html><html><head><meta http-equiv="Con ...
- Oracle 数据库、实例、表空间、用户、数据库对象
Oracle是一种数据库管理系统,是一种关系型的数据库管理系统.通常情况了我们称的“数据库”,包含了物理数据.数据库管理系统.内存.操作系统进程的组合体,就是指这里所说的数据库管理系统. 完整的Ora ...
- java内存模型原理阅读总结
Java内存模型可以理解为在特定操作协议下,对特定的内存或高速缓存进行读写访问的过程抽象.不同架构的物理计算机可以有不一样的内存模型,java虚拟机也有自己的内存模型,java虚拟机规范中试图定义一种 ...
- 洛谷P1048采药
这道题一看就知道是01背包,我门用f[i]来表示时间剩余i时的最大的价值 一共只有两种选择取或者不取,可以得到方程式f[i]=max(f[i],f[i-a[i]]+v[i])(a[i]是表示时间,v[ ...
- Apache 错误日志
配置文件中:httpd.conf ErrorLog "/usr/local/var/log/apache2/error_log1" CustomLog "/usr/loc ...
- 5-3 time模块
1.取当前时间戳和当前格式化时间 import time1 # 以时间戳的形式打印当前时间 1543849862 print(int(time.time()))#时间戳 # 取当前格式化好的时间 20 ...
- 动态规划:HDU3496-Watch The Movie(二维费用的背包问题)
Watch The Movie Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 65535/65535 K (Java/Others) ...
- Maya
建立酒杯的方法(CV曲线) surface(曲面)-- creat cv curve tool-- control vertex(调整图形)[再次creat cv建立厚度,只需要建立酒杯的上口]--- ...
- easyui tree datagrid动态添加表头和表格数据,动态弹出框,修改和删除按钮
1.要有获取表头的URL和表格的URL 背景:点击树的一个节点,就加载一个表格,这个表格是动态的,表头和表格数据都是动态的 解决方案:需要两个URL,一个是获取表头的URL,一个是获取表格数据的URL ...
- datagrid的修改和删除功能的实现
1.修改 双击,进入一行的编辑状态的功能的实现 2.删除 3.扩展easyui的datagrid,添加动态增加或删除Editor的方法 (1)背景要求: 对于某一列,比如密码,动态增加时候,是可以编辑 ...