flexbox布局详解
申明:以下都是个人整理,如有错误之处,请指正,谢谢!
flexbox——一维布局模型,只能处理一个维度(行或者列)上的布局。由flex-container
(flex容器)和flex-item
(flex元素)构成,为flex-item
(flex元素)之间提供了强大的空间分布和对齐能力。
弹性布局是指通过调整flex-item的宽高,从而在任何显示设备上实现对可用显示空间最佳填充能力,要理解flexbox,需要先理解以下概念:
1 flex容器(弹性容器)
flex container:父级元素设置display:flex;
或者display:inline-flex;
属性,将容器变为flex容器。
flex item:flex容器的所有直接子元素自动成为flex项。
主轴(main axis):flex item依次排列的轴为主轴。
交叉轴(cross axis):垂直于主轴的轴为交叉轴。
排列方向(flex direction):弹性容器的主轴起点(main start)/ 主轴终点(main end)和侧轴起点(cross start)/ 侧轴终点(cross end)描述了弹性项目排布的起点和终点。
行(line):根据flex-wrap
属性,flex item可以排布在单个行或者多个行中。
尺寸(Dimension):根据主轴和侧轴,flex item的宽和高中,对应主轴为主轴尺寸(main size),对应侧轴为侧轴尺寸(cross size)。
图例解释:
2 属性详解
以下属性按照功能分类来介绍:
2.1 flex container属性
1、flex-flow
:flex-direction
和flex-wrap
的简写。默认值row nowrap
。
2、flex-direction
:定义主轴,交叉轴垂直于主轴。主要是改变主轴的方向和主轴的起点和终点。
row
【从左到右排列一行】,默认值row-reverse
【从右到左排列一行】column
【从上到下排列成一列】column-reverse
【从下到上排列成一列】
注:flex-direction
并不是把flex item从主轴移到交叉轴上对齐,而是让主轴自身从水平->垂直或者从垂直->水平。
3、flex-wrap
:默认情况下,flex item都排列在一条轴线上,而flex-wrap
定义如果一条轴线上排列不下时如何换行。
nowrap
【不换行】,默认值wrap
【换行,第一行在上方】wrap-reverse
【换行,第一行在下方】
4、justify-content
:定义flex item在主轴上的对齐方式。
flex-start
【主轴起点对齐】,默认值flex-end
【主轴终点对齐】center
【主轴中点居中】space-between
【主轴两端对齐,flex item之间的间隔都相等】space-around
【flex item两侧的间隔相等,flex item之间的间隔比项目两边的间隔大一倍】
注:flex item不可伸缩或者可伸缩已经达到最大尺寸的时候,可以分配主轴线上的剩余空间时才可以。
5、align-items
:定义flex item在交叉轴上的对齐方式。
flex-start
【当前交叉轴起点对齐】flex-end
【当前交叉轴终点对齐】center
【当前交叉轴中点对齐】baseline
【flex item第一行文字的基线对齐】stretch
【如果flex item未设置cross size或者设置为auto,将铺满交叉轴方向的size】,默认值
注:当flex-wrap:wrap / wrap-reverse
时,对应多条主轴线,按照主轴线可以将flex container分为多个块,每个块内对应交叉轴和交叉轴的起始点,而上面的对齐是根据这里每个块的起始点;如果flex-wrap:nowrap
时,为特殊情形。
6、align-content
:定义多根轴线的对齐方式,如果只有一条轴线,则该属性不起作用。
flex-start
【交叉轴起点对齐】flex-end
【主轴终点对齐】center
【主轴中点居中】space-between
【交叉轴两端对齐,flex item之间的间隔都相等】space-around
【每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍】stretch
【轴线占满整个交叉轴】,默认值
注:此时对应整个flex container容器的cross axis,注意这时只有一个cross start和一个cross end。
2.2 flex item属性
1、flex
:flex-grow
、flex-shrink
和flex-basic
的简写。默认值0 1 auto
。
注:
- 该属性对应两个快捷值:
auto【1 1 auto】
和none【0 0 auto】
; - 优先使用该属性,不建议单独分开写三个属性,因为浏览器会推算相关值。
2、flex-grow
:定义flex item的拉伸比例。
<number>
【正整数,负数无效】,默认值为0
注:按照比例分割剩余的空间。例如:如果所有flex item的flex-grow
属性都为1,则它们将等分剩余空间(如果有的话)。如果一个flex item的flex-grow
属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。
3、flex-shrink
:定义flex item的收缩比例,即如果空间不足,该flex item将缩小。
<number>
【从左到右排列一行】,默认值为1
注:如果所有flex item的flex-shrink
属性都为1,当空间不足时,都将等比例缩小。如果一个flex item的flex-shrink
属性为0,其他项目都为1,则空间不足时,前者不缩小。
4、flex-basic
:定义flex item占据的主轴空间(main size),根据此属性计算主轴是否有多余的空间。
auto
【flex item本来的大小】,默认值<number>
【可固定,如:350px
;也可以设置百分比,如:25%
】
注:如果flex-basic:auto;
,则auto
会解析为其内容的大小,设置宽度时有min-content
和max-content
两个值,此时flexbox 会将flex子元素的 max-content
大小作为 flex-basis
的值;
5、align-self
:定义单个flex item与其他flex item不一样的对齐方式。
auto
【表示继承父元素的align-items属性,如果没有父元素,则等同于stretch】,默认值flex-start
【当前交叉轴起点对齐】flex-end
【当前交叉轴终点对齐】center
【当前交叉轴中点对齐】baseline
【flex item第一行文字的基线对齐】stretch
【如果flex item未设置cross size或者设置为auto,将铺满交叉轴方向的size】
注:
align-self:auto;
时,其值被计算为父级元素的align-items
属性的值,或者如果元素没有父元素,那么其值为stretch
;- 除了
auto
,其他都与align-items
属性完全一致。
6、order
:定义flex item排列顺序。数值越小,排列越靠前。
<integer>
【顺序值】,默认值为0
注:flex item可以使用这个简单的属性重新排序,而不需要重新修改HTML代码。
7、min-width
/ min-height
:定义flex item的main size的最小值。
8、max-width
/ max-height
:定义flex item的main size的最大值。
3 浏览器兼容性
浏览器兼容性查看:https://caniuse.com/#feat=flexbox
参考链接:
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax
flexbox布局详解相关推荐
- 【C++】C++对象模型:对象内存布局详解(C#实例)
C++对象模型:对象内存布局详解 0.前言 C++对象的内存布局.虚表指针.虚基类指针解的探讨,参考. 1.何为C++对象模型? 引用<深度探索C++对象模型>这本书中的话: 有两个概念可 ...
- Linux进程地址空间与进程内存布局详解,内核空间与用户空间
Linux进程地址空间与进程内存布局详解 程序段(Text):程序代码在内存中的映射,存放函数体的二进制代码. 初始化过的数据(Data):在程序运行初已经对变量进行初始化的数据. 未初始化过的数据( ...
- DevExpress控件GridControl中的布局详解 【转】
DevExpress控件GridControl中的布局详解 [转] 2012-10-24 13:27:28| 分类: devexpress | 标签:devexpress |举报|字号 订阅 h ...
- qt布局嵌套_QDockWidget嵌套布局详解-实现Visual Studio布局
概述 许多工程软件,如Qt Creator,VS,matlab等,都是使用dock布局窗口,这样用户可以自定义界面,自由组合窗口. Qt的嵌套布局由QDockWidget完成,用Qt Creator拖 ...
- html中style布局放哪,CSS样式表与格式布局详解
样式表 CSS(Cascading Style Sheets 层叠样式表),作用是美化HTML网页. 内联样式表: 例: 内联样式表 内嵌样式表:必须写在head标签里 例: p { 样式;} he ...
- (淘宝无限适配)移动手机端rem布局详解(转载非原创)
https://www.cnblogs.com/well-nice/p/5509589.html (淘宝无限适配)手机端rem布局详解(转载非原创) 从网易与淘宝的font-size思考前端设计稿与工 ...
- flutter页面布局HTML,Flutter开发实战初级(2)页面布局详解
初级根底系列 Flutter开发实战初级(1)ListView详解 Flutter开发实战初级(2)布局详解 项目实战系列 Flutter开发实战 高仿微信(1)主页 Flutter开发实战 高仿微信 ...
- grid layout网格布局详解
grid layout网格布局详解 什么是grid layout grid的特点 grid css属性的基础知识 创建一个grid布局 创建一个网格 隐性网格与显性网格 尺寸单位fr repeat函数 ...
- tkinter-grid布局详解
前文tkinter-pack布局详解介绍了pack布局,相信对tkinter的布局套路有了一定的了解.本文将介绍另一种布局类grid. 同样,展示布局类与控件类的类间关系: 文章目录 grid 默认分 ...
- Android开发重点难点1:RelativeLayout(相对布局)详解
前言 啦啦啦~博主又推出了一个新的系列啦~ 之前的Android开发系列主要以完成实验的过程为主,经常会综合许多知识来写,所以难免会有知识点的交杂,给人一种混乱的感觉. 所以博主推出"重点难 ...
最新文章
- 忽略并存在数据损坏风险_内部审计快速启动数据分析的6个关键点
- UVa12704 - Little Masters
- Spring Cloud【Finchley】-09Feign使用Hystrix
- oracle导入脚本乱码,imp导入乱码解决
- pytorch每次迭代训练前都重新对数据集进行采样形成平衡数据集
- div字体居中_div和span的使用
- 作者:宾军志(1976-),男,御数坊(北京)科技咨询有限公司联合创始人。...
- bizagi simulation 仿真学习
- 实现拖拽上传文件的一款小控件——dropzone
- ACM-经典DP之Monkey and Banana——hdu1069
- java模拟魔兽世界武器掉落
- python中numpy函数ftt_语音MFCC提取:librosa python_speech_feature(2019.12)
- 计算机语言低下限高上限,2018年各地高考作文嘤酱不负责的胡乱哔哔
- WORD文档打开文件时老提示发送错误报告,或者打印不全
- BlackHat USA 2021 洞察(三):议题技术解读
- loopback回环接口
- 阿里云操作云服务器ECS,linux系统远程连接
- 波特价值链分析模型(转载)
- 从给定数字集中找到最大的数字
- maven项目子模块相互引用无效
热门文章
- The POODLE attack (SSLv3 supported) 漏洞修复
- EverEdit: Windows上国人开发的比Notepad++更优秀的高级文本编辑器
- 互联网公司对Android,iOS开发工程师的职位要求
- feign扫描_Feign基础入门及特性讲解
- 京东个人注册开店要怎么做?京东开店步骤介绍!
- 自己做语料——Python爬取新闻联播文字版
- python语言eval_Python中的 eval 函数
- MATLAB数字图像示例题目
- 九阳神功足疗是什么?分析美团按摩项目,泡脚足浴排第一
- 软件首次亮相前超级账本技术升温