资讯专栏INFORMATION COLUMN

H5开发开发利器——flex

whatsns / 1985人阅读

摘要:目前,它已经得到了大部分浏览器的支持。它的所有子元素自动成为容器成员,称为项目,简称项目。容器默认存在两根轴水平的主轴和垂直的交叉轴。如果项目未设置高度或设为,将占满整个容器的高度。

距离新建这篇文章已经好几个月了,今天有终于有时间来完善这篇文章了...
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

相关文章

  • CSS相关文章

    摘要:如何用获取虚拟键盘高度前端早读课月号早读文章由汤谷投稿分享。大杀器和把动画转换成原生动画初来乍到,本文搬运自我月份在知乎发的文章。 前端面试之 CSS3 新特性 除了 HTML5 的新特性,CSS3 的新特性也是面试中经常被问到的。 如何用 js 获取虚拟键盘高度?-前端早读课 9月7号早读文章由@汤谷投稿分享。正文从这开始~ 这是一个存在很久的历史问题了,对于这样一个具有普遍性的问题...

    FrozenMap 评论0 收藏0
  • 前端资源收集整理

    摘要:工作原因,最近一年断断续续写了一点前端代码,收集整理了一些资料,和大家共享。 工作原因,最近一年断断续续写了一点前端代码,收集整理了一些资料,和大家共享。 Github版本:Front-End Resource Collection 前端相关资源汇总 学习指导 精华文章 Web前端的路该怎么走?:文章超长,但是干货超级多,值得反复精读! 听说2017你想写前端?:适合于已经度过了小白阶...

    awesome23 评论0 收藏0
  • 前端资源收集整理

    摘要:工作原因,最近一年断断续续写了一点前端代码,收集整理了一些资料,和大家共享。 工作原因,最近一年断断续续写了一点前端代码,收集整理了一些资料,和大家共享。 Github版本:Front-End Resource Collection 前端相关资源汇总 学习指导 精华文章 Web前端的路该怎么走?:文章超长,但是干货超级多,值得反复精读! 听说2017你想写前端?:适合于已经度过了小白阶...

    antyiwei 评论0 收藏0
  • 前端资源收集整理

    摘要:工作原因,最近一年断断续续写了一点前端代码,收集整理了一些资料,和大家共享。 工作原因,最近一年断断续续写了一点前端代码,收集整理了一些资料,和大家共享。 Github版本:Front-End Resource Collection 前端相关资源汇总 学习指导 精华文章 Web前端的路该怎么走?:文章超长,但是干货超级多,值得反复精读! 听说2017你想写前端?:适合于已经度过了小白阶...

    KavenFan 评论0 收藏0

发表评论

0条评论

whatsns

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<