不再混淆,一次搞懂!图解flexbox十余个属性
原文首发于个人博客:不再混淆,一次搞懂!图解flexbox十余个属性
flexbox的发明简直是csser的一大福音,终于可以不再需要为垂直居中一个元素而绞尽脑汁了。同时它还能够实现弹性布局,可以说没有它做不到,只有你想不到。但是由于历史原因,flexbox的有多个版本在市面上流通,需要使用不同的厂商前缀或者使用完全不一样的属性名,起初的时候造成人们使用的困扰。
不过后来随着css后处理器的出现,使得我们在用起flexbox来,几乎不用担心浏览器兼容的问题了。相关博文:还在手动给css加前缀?no!几种自动处理css前缀的方法简介
一、flexbox是什么?
从字面上来看,flexbox是可伸缩的盒子的意思。我们可以让这个盒子里的子项,根据我们的需要拉伸、对齐、排序。设置父元素为flexbox,即可激活这个弹性机制。方法如下:
首先我们来设置html
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
接下来设置css
.parent {
display:flex; // 类似display:block的flexbox
}
或者
.parent {
display:inline-flex; // 类似display:inline-block的flexbox
}
二、属性太多很难记?
和flexbox相关的属性繁多,每个属性又有不同的值,要一时半会全部记住是不太可能,但是我们可以分类记忆,在脑中有印象后在使用时勤查文档,相信要熟练应用还是会很快的。记忆flexbox只需要记住两点:
- 所有的属性分为两类:父容器的属性和子项的属性
- 所有的属性值几乎都和排列、对齐、占地面积3类特性相关
父容器属性
属性 | 作用 | 特性分类 |
---|---|---|
flex-direction | 定义子项在容器内的排列方向 | 排列 |
flex-wrap | 定义子项在容器内的换行效果 | 排列 |
flex-flow | flex-direction和flex-wrap的复合属性 | 排列 |
justify-content | 定义子项在容器内水平对齐方式 | 对齐 |
align-items | 定义 子项在容器内垂直对齐方式 | 对齐 |
align-content | 定义多行子项在容器内整体垂直对齐方式 | 对齐 |
子项属性
属性 | 作用 | 特性分类 |
---|---|---|
order | 定义子项们的排列顺序 | 排列 |
flex-grow | 定义子项宽度之和不足父元素宽度时,子项拉伸的比例 | 占地面积 |
flex-shrink | 定义子项宽度之和超过父元素宽度时,子项缩放的比例 | 占地面积 |
flex-basis | 定义子项的初始宽度,若子项宽度之和超过父元素宽度时,子项按照flex-basis的比例缩放 | 占地面积 |
align-self | 定义单个子项与其他项目不一样的对齐方式 | 对齐 |
三、图解父容器的属性
我们逐一来看看效果,先来看看父元素的属性(不要忘了我们已经在父元素上加上了display:flex哦,下面为了更直观对比隐藏了这个设置)
3.1 flex-direction属性
定义子项在容器内的排列方向
.parent {
flex-direction: row | row-reverse | column | column-reverse;
}
3.2 flex-wrap属性
定义子项在容器内的换行效果
.parent {
flex-wrap: nowrap | wrap | wrap-reverse;
}
3.3 flex-flow属性
flex-flow是flex-direction和flex-wrap两个属性的简写,参考以上两个属性的写法即可,在此略过。
3.4 justify-content属性
定义子项在容器内水平对齐方式
.parent {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
3.5 align-items属性
定义 子项在容器内垂直对齐方式
.parent {
align-items: flex-start | flex-end | center | baseline | stretch;
}
3.6 align-content属性
定义多行子项在容器内整体垂直对齐方式
.parent {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
四、图解子项的属性
4.1 order属性
定义子项们的排列顺序
.child{
order:[integer] /* 传入整数,default 0 */
}
flex-grow属性
定义子项宽度之和不足父元素宽度时,子项拉伸的比例
.child{
flex-grow:[number] // 传入数字
}
4.2 flex-shrink属性
定义子项宽度之和超过父元素宽度时,子项缩放的比例
.child{
flex-shrink:[number] /* 传入数字, default 1*/
}
说明:
flex-shrink的默认值为1,浏览器将超出的空间,按照收缩因子相加之后计算比率来进行空间收缩。
图例中4定义了flex-shrink:2,其余子项定义了flex-shrink:1,这样可以看到总共将剩余空间分成了6份,4个1份,1个2份,即1:1:1:2:1。
我们给父容器width定义为800px,子项的width被定义为250px,5个子项相加之后即为1250px,超出父容器450px。那么这么超出的450px需要被这5个子项消化。
按照收缩因子,加权综合可得250*1+250*1+250*1+250*2+250*1=1500px;
于是我们可以计算子项将被移除的溢出量是多少:
收缩因子为1的,被移除溢出量:(250*1/1500)*450,即等于75px
收缩因子为2的,被移除溢出量:(250*2/1500)*450,即约等于150px
最后实际宽度分别为:250-75=175px, 250-150=100px
4.3 flex-basis属性
定义子项的初始宽度,若子项宽度之和超过父元素宽度时,子项按照flex-basis的比例缩放
.child{
flex-basis: [length] | [percentage] | auto; /* default auto*/
}
说明:
flex-basis的默认值为auto(
无特定宽度值,取决于其它属性值),浏览器将超出的空间,按照各子项basis的值的比例进行空间收缩。
图例中5定义了flex-basis:400px,其余子项定义了flex-basis:200px,我们给父容器width定义为800px,5个子项相加之后即为1200px,超出父容器400px。那么这么超出的400px需要被这5个子项消化。
这5个子项的比例为1:1:1:1:2,则多出来的400px要被分为6份,于是我们可以计算子项将被移除的溢出量是多少:
flex-basis为400px的,被移除溢出量:400/6*2,即约等于133.33px
flex-basis为200px的,被移除溢出量:400/6*1,即约等于66.67px
最后实际宽度分别为:400-133.33=266.67px, 200-66.67=133.33px
flex-basis:[percentage]与[length]的计算方式类似
4.4 flex属性
flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
4.5 align-self属性
定义单个子项与其他项目不一样的对齐方式
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖父容器的align-items属性。默认值为auto,表示继承父容器的align-items属性,如果没有父容器,则等同于stretch。
图例中父容器设置了align-items:flex-start,然后我们单独给5设置了align-self:flex-end。
参考:
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex
http://www.css88.com/book/css/properties/flex/index.htm
不再混淆,一次搞懂!图解flexbox十余个属性的更多相关文章
- 帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
作为一名前端工程师,必须搞懂JS中的prototype.__proto__与constructor属性,相信很多初学者对这些属性存在许多困惑,容易把它们混淆,本文旨在帮助大家理清它们之间的关系并彻底搞 ...
- 每个java初学者都应该搞懂的问题
对于这个系列里的问题,每个学JAVA的人都应该搞懂.当然,如果只是学JAVA玩玩就无所谓了.如果你认为自己已经超越初学者了,却不很懂这些问题,请将你自己重归初学者行列.内容均来自于CSDN的经典老贴. ...
- 真正“搞”懂http协议01—背景故事
去年读了<图解HTTP>.<图解TCP/IP>以及<图解网络硬件>但是读了之后并没有什么深刻的印象,只是有了一层模糊的脉络,刚好最近又接触了一些有关http的相关内 ...
- 彻底搞懂字符编码(unicode,mbcs,utf-8,utf-16,utf-32,big endian,little endian...)[转]
最近有一些朋友常问我一些乱码的问题,和他们交流过程中,发现这个编码的相关知识还真是杂乱不堪,不少人对一些知识理解似乎也有些偏差,网上百度, google的内容,也有不少以讹传讹,根本就是错误的(例如说 ...
- 机器学习:让我们彻底搞懂CNN【转】
本文转载自:http://115.com/182920/T1266078.html 机器学习:让我们彻底搞懂CNN 上世纪科学家们发现了几个视觉神经特点,视神经具有局部感受眼,一整张图的识别由多个局部 ...
- 搞懂分布式技术21:浅谈分布式消息技术 Kafka
搞懂分布式技术21:浅谈分布式消息技术 Kafka 浅谈分布式消息技术 Kafka 本文主要介绍了这几部分内容: 1基本介绍和架构概览 2kafka事务传输的特点 3kafka的消息存储格式:topi ...
- 搞懂head 和 tail 命令
情景 会点linux命令的人都知道head -n k和tail -n k(k≥0)的作用,但却不知道还支持head -n -k和tail -n +k的用法, 更不知道有着怎样的作用了. 图解 下面,用 ...
- 轻松搞懂Java中的自旋锁
前言 在之前的文章<一文彻底搞懂面试中常问的各种“锁”>中介绍了Java中的各种“锁”,可能对于不是很了解这些概念的同学来说会觉得有点绕,所以我决定拆分出来,逐步详细的介绍一下这些锁的来龙 ...
- 一文彻底搞懂Java中的环境变量
一文搞懂Java环境变量 记得刚接触Java,第一件事就是配环境变量,作为一个初学者,只知道环境变量怎样配,在加上各种IDE使我们能方便的开发,而忽略了其本质的东西,只知其然不知其所以然,随着不断的深 ...
随机推荐
- [CF1027F]Session in BSU[最小基环树森林]
题意 有 \(n\) 门课程,每门课程可以选择在 \(a_i\) 或者 \(b_i\) 天参加考试,每天最多考一门,问最早什么时候考完所有课程. \(n\leq 10^6\). 分析 类似 [BZOJ ...
- restful framework之序列化组件
一.Django自带序列化组件 from django.core import serializers def test(request): book_list = Book.objects.all( ...
- 开源第三方登录组件OAuthLogin2.0 架构解析及开源地址
OAuthLogin2.0介绍地址: 入门地址:http://www.cnblogs.com/dazhuangtage/p/6306133.html Nuget地址:https://www.nuget ...
- VSCode中C/C++库文件的配置
VSCode中C/C++库文件的配置 之前一直在是用sublime做主要编辑器,现在主要使用VSCode,毕竟大厂制作,从目前的使用情况来看,我更喜欢使用VSCode编辑器. 有时候会用VScode来 ...
- CAN总线的显性电平为什么能覆盖隐性电平?
摘要:在CAN总线中,显性电平是强驱动,隐性电平时弱驱动,因此当有的节点发送显性电平有的节点发送隐性电平时,总线上呈现的肯定是强驱动的状态,这就是CAN总线显性电平可以覆盖隐性电平的原因. 大家都知道 ...
- MySQL日志系统:redo log与binlog
日志系统主要有redo log(重做日志)和binlog(归档日志).redo log是InnoDB存储引擎层的日志,binlog是MySQL Server层记录的日志, 两者都是记录了某些操作的日志 ...
- Linux命令对应的英文及整体学习法
linux命令 注意一下内容收集与互联网,如果觉得有版权问题,请联系. 用Linux命令的时候,如果熟悉对应英文的含义,更有助于理解相应的命令.man: Manual 意思是手册,可以用这个命令查询其 ...
- 简介几种系统调用函数:write、read、open、close、ioctl
在 Linux 中,一切(或几乎一切)都是文件,因此,文件操作在 Linux 中是十分重要的,为此,Linux 系统直接提供了一些函数用于对文件和设备进行访问和控制,这些函数被称为系统调用(sysca ...
- 第五章 if语句
5.2条件测试 使用==判断相当: 使用!=判断不相等: 每条if语句的核心都是一个值为Tre或False的表达式,这种表达式被称为条件测试,如果条件测试的值为Ture,则执行紧跟在if语句后面的代码 ...
- python基础_字符编码
字符编码的历史 阶段一:现代计算机起源于美国,最早诞生也是基于英文考虑的ASCII 阶段二:为了满足中文,中国人定制了GBK 阶段三:各国有各国的标准,就会不可避免地出现冲突,结果就是,在多语言混合的 ...