摘要:目前,它已经得到了大部分浏览器的支持。它的所有子元素自动成为容器成员,称为项目,简称项目。容器默认存在两根轴水平的主轴和垂直的交叉轴。如果项目未设置高度或设为,将占满整个容器的高度。
距离新建这篇文章已经好几个月了,今天有终于有时间来完善这篇文章了...
flexbox即弹性布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了大部分浏览器的支持。
flexbox共经历了三个阶段的变化:
(1)W3C 2009年第1次草案:display:box
(2)W3C 2011年第2次草案:display:flexbox
(3)W3C 2012年第3次草案:display:flex(当前阶段版本)
首先来看张图了解下几个基本的概念:
采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”。
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。
任何一个元素都可以只能为flex布局,其可以水平布局也可以垂直布局(通过设置flex-direction:row/columnl来设置),设置元素为flex 布局后我们还可以根据不同的需求在该元素上设置一下几种属性(容器属性):
(1)flex-direction属性决定主轴的方向(即项目的排列方向)
值范围:flex-direction: row (默认值):主轴为水平方向,起点在左端 row-reverse 主轴为水平方向,起点在右端 column 主轴为垂直方向,起点在上沿 column-reverse; 主轴为垂直方向,起点在下沿
(2)flex-wrap属性决定了如果一条轴线排不下,如何换行
值范围:flex-wrap: nowrap 不换行 wrap 换行,从第二行的左侧开始 wrap-reverse 换行,从第二行的右侧开始
(3)justify-content属性决定了项目在主轴上的对齐方式
值范围:justify-conten: flex-start 左对齐 flex-end 右对齐 center 居中对齐 space-between 两端对齐,项目之间的间隔都相等 space-around 每个项目两侧的间隔相等 (4)align-items属性决定了项目在交叉轴上如何对齐方式 值范围:align-items: flex-start 交叉轴的起点对齐。 flex-end 交叉轴的终点对齐。 center 交叉轴的中点对齐。 baseline 项目的第一行文字的基线对齐。 stretch 如果项目未设置高度或设为auto,将占满整个容 器的高度。 (5)align-content属性决定了多根轴线的对齐方式,如果项目只有一根轴线,该属性不起作用 值范围:align-content: flex-start 与交叉轴的起点对齐。 flex-end 与交叉轴的终点对齐。 center 与交叉轴的中点对齐。 space-between 与交叉轴两端对齐,轴线之间的间隔平均分布。 space-around 每根轴线两侧的间隔都相等。所以,轴线之间的 间隔比轴线与边框的间隔大一倍。 stretch 轴线占满整个交叉轴。 **以上就是flex布局时容器上比较重要的属性,需理解透彻。**
说完容器的布局属性再来说说容器下各个项目的布局属性
以下6个属性设置在项目上: 1. order 定义项目的排列顺序。数值越小,排列越靠前,默认为0 2. flex-grow 定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大 3. flex-shrink 定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小 4. flex-basis 定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏 览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即 项目的本来大小 5. align-self 允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属 性。默认值为auto,表示继承父元素的align-items属性,如果没有 父元素,则等同于stretch **以上就是flex布局时项目上比较重要的属性,需理解透彻。**
几点注意事项
flex布局其实就是将父类的元素实现了流式布局,我们只需要在父类定位好的情况下给子类“添砖
加瓦”就可以了
justify-content:center + align-content:center 结合使用可以很方便的实现元素水
平和垂直居中,相比之前用position来实现要高效很多
由于经历了3个阶段的演变,所有在个别浏览器下会存在兼容性问题(如uc的低版本、QQ浏览器),
所以建议使用"autoprefixer"这类工具自动补全各类写法已避免该问题的出现
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/111674.html
阅读 4133·2021-09-24 09:47
阅读 1131·2021-09-03 10:33
阅读 2028·2019-08-30 11:13
阅读 994·2019-08-30 10:49
阅读 1722·2019-08-29 16:13
阅读 1978·2019-08-29 11:28
阅读 3062·2019-08-26 13:31
阅读 3576·2019-08-23 17:14