flex布局基本语法
注 : 本文章按照菜鸟教程 Flex布局语法教程为原型稍加修改,以方便自己学习. 菜鸟教程地址:http://www.runoob.com/w3cnote/flex-grammar.html
2009年,W3C提出了一种新的方案—-Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能
1.什么是flex布局?
Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性.
flex布局 : .box{display:flex;}
行内元素也可以使用flex布局 : .box{display:inline-flex;}
Webkit内核的浏览器,必须加上-webkit前缀 : .box{display:-webkit-flex; display:flex;}
注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。
2.基本概念
Flex容器(flex container) : 采用Flex布局的元素,称为flex容器.
Flex项目(flex item) : flex容器的所有子元素,自动成为容器成员,即flex项目.
容器的两根轴线 : 水平的主轴(main axis), 垂直的交叉轴(cross axis).
主轴(main axis) : 开始位置->main start, 结束位置->main end, 项目默认沿主轴排列.
交叉轴(cross axis) : 开始位置->cross start, 结束位置->cross end
容器内的单个项目占据的主轴空间叫做->main size, 交叉轴空间叫做->cross size
3.FLex属性
flex属性分为容器属性和项目属性.
容器属性 : flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content
项目属性 : order, flex-grow, flex-shrink, flex-basis, flex, align-self
3.1容器属性
flex-direction : 决定主轴的方向(即项目排列方向)
row : 水平方向,从左到右.(默认属性)
row-reverse : 水平方向,从右到左.
column : 垂直方向,从上到下.
column-reverse : 垂直方向,从下到上.
flex-wrap : 规定一条轴线排不下,如何换行.
nowrap : 不换行(默认属性)
wrap : 换行,第一行在上边
wrap-reverse : 换行,第一行在下边,(只行数排列相反,单行内依旧从左到右排列,每一行都是).
flex-flow : 结合flex-direction和flex-wrap,写法如下
.box{flex-flow:column wrap-reverse}
justify-content : 定义项目在主轴上的对齐方式
flex-start : 左对齐(默认值),项目以主轴的起点对齐
flex-end : 右对齐,项目以主轴的终点
center : 居中
space-between : 两端对齐,项目之间间隔相等
space-around : 每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍
align-items : 定义项目在交叉轴的对齐方式(仅单行,多行对齐由align-content定义)
stretch : 如果项目未设置高度或设为auto,将占满整个容器的高度(默认值)
flex-start : 从上到下,以交叉轴的起点为基线,向终点延伸
flex-end : 从下到上,以交叉轴的终点为基线,向起点延伸
center : 交叉轴的中点对齐,项目的中点放在交叉轴的中点上
baseline : 以一行中每个项目的第一行文字进行对齐.
align-content : 定义了容器内有多行项目时沿交叉轴的对齐方式, 如果项目只有一根轴线,该属性不起作用
stretch : 轴线占满整个交叉轴(每行都有一条轴线), 默认属性
flex-start : 以交叉轴的起点对齐
flex-end : 以交叉轴的终点对齐
center : 以交叉轴的中点对齐
space-between : 多行项目在交叉轴上间隔平均分布
space-around : 多行项目在交叉轴上两侧的间隔都相等。所以,项目在交叉轴上的间隔比项目与边框的间隔大一倍
注 : justify-content, align-items和align-content是容器的属性,而不是项目的属性,是设定一个容器内项目以轴线上的某一位置对齐
3.2项目属性
order : 定义项目的排列顺序,数值越小,排列越靠前.默认值为0,写法如下
.item{order:5}
flex-grow : 定义属性项目放大比例,默认为1
如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍
flex-shrink : 定义项目缩小比例,默认为1
如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小.负值对该属性无效
flex-basis : 定义了在分配多余空间之前,项目占据的主轴空间(main size),浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小
它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间
flex : 结合flex-grow, flex-shrink 和 flex-basis的属性, 默认值为0 1 auto, 推荐优先使用
该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)
flex: 1; ==>意思是伸缩比(flex-grow和flex-shrink)为1,剩余空间占比(flex-basis)为1
align-self : 允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性, 默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch
该属性可能取6个值,除了auto,其他都与align-items属性完全一致
flex布局基本语法的更多相关文章
- Flex 布局:语法篇
网页布局(layout)是 CSS 的一个重点应用.布局的传统解决方案,基于盒状模型,依赖 display 属性 + position 属性 + float 属性.它对于那些特殊布局非常不方便,比如, ...
- CSS之Flex 布局:语法篇
网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如 ...
- Flex布局语法与实践
一.参考文献 阮一峰 Flex布局的语法 阮一峰 Flex布局的实践 二.Flex语法 (一)Flex是什么 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状 ...
- Flex布局—语法篇
网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 ...
- H5新出的flex布局
百度前端技术学院第一阶段中的任务十,就是关于flexbox布局的 与flexbox布局相关的资料如下: 1.flex布局教程-语法篇-阮一峰的网络日志 http://www.ruanyifeng.c ...
- flex布局全解析
前言 很长一段时间, 我知道有flex这个布局方式, 但是始终没有去学它. 3点原因: 感觉还比较新, 担心兼容性不好. 普通的布局方式能满足我的绝大多数需求. 好像蛮复杂的. 最近由于开发需要, 学 ...
- 微信小程序前置课程:flex布局(二)
原文:http://www.ruanyifeng.com/blog/2015/07/flex-examples.html 上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到 ...
- Flex 布局教程
今天给大家分享一下flex布局的语法 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于 ...
- flex布局应用于踩坑
一.预告 本文不是一篇入门的文章所有请符合以下条件的战斗人员绕道: 1.初学前端,对前端的传统布局还不是很熟悉的人 2.后端人员对前端不打算深入学习的同学 二.开篇 flex布局原本是好几个月前就一直 ...
随机推荐
- Vue中的scoped及穿透方法
何为scoped? 在vue文件中的style标签上,有一个特殊的属性:scoped.当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组 ...
- vue项目中解决type=”file“ change事件只执行一次的问题
问题描述 在最近的项目开发中遇到了这样的一个问题,当我上传了一个文件时,我将获取到的文件名清空后,却无法再次上传相同的文件 <template> <div class="h ...
- 第七章之S5PV210移植到Nandflash
1,之前的操作都是基于SD卡进行运行的,如今在Nandfalsh中运行u-boot.因为s5p_goni.h配置文件没有配置Nand相关文件,所以先配置Nand文件. 在include/configs ...
- [ 搭建Redis本地服务器实践系列 ] :序言
说起来,是在一个气候适宜的下午,虽然临近下班,不过办公室里还是充满了忙碌的身影,不时的还会从办公区传来小伙伴们为了一个需求而激烈争论的声音,自从入了互联网这个行业,说实话,也就很少休息了,当然了也不全 ...
- 【转】关于Sentry
1. Sentry介绍及使用 Sentry 是一个实时事件日志记录和汇集的平台.其专注于错误监控以及提取一切事后处理所需信息而不依赖于麻烦的用户反馈. 备注:国内有同类型的产品Fundebug,提供网 ...
- PAT1046: Shortest Distance
1046. Shortest Distance (20) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue The ...
- Java开源生鲜电商平台-账单模块的设计与架构(源码可下载)
Java开源生鲜电商平台-账单模块的设计与架构(源码可下载) 补充说明:Java开源生鲜电商平台-账单模块的设计与架构,即用户的账单形成过程. 由于系统存在一个押账功能的需求,(何为押账,就是形成公司 ...
- Windows上使用Thunderbird与GPG发送和解密公钥加密的电子邮件
作者:荒原之梦 原文链接:http://zhaokaifeng.com/?p=552 非对称加密的原理: 最先出现的加密方法是对称加密.在对称加密算法中是不区分公钥和私钥的,加密与解密使用的都是同一个 ...
- springboot集成schedule(深度理解)
背景 在项目开发过程中,我们经常需要执行具有周期性的任务.通过定时任务可以很好的帮助我们实现. 我们拿常用的几种定时任务框架做一个比较: 从以上表格可以看出,Spring Schedule框架功能完善 ...
- HTML5 CSS3专题 诱人的实例 CSS3打造百度贴吧的3D翻牌效果
首先感谢w3cfuns的老师~ 今天给大家带来一个CSS3制作的翻牌效果,就是鼠标移到元素上,感觉可以看到元素背后的信息.大家如果制作考验记忆力的连连看.扑克类的游戏神马的,甚至给女朋友写一些话语,放 ...