display:flex布局

写这篇文章的原因是:1、我很早就想写了;2、昨天面试阿里时,在面试结束的最后被尊敬的面试官随意问了一下display的属性值;引起我开始写作这篇文章。相信一些写pc端的初级开发者还是会想不起display有flex这个属性值的,哈哈。


很久以前就关注了flex布局,只是以前flex布局在pc端的浏览器兼容不是很友好,所以在开发中不是很经常使用,现在随着浏览器的更新换代,很多开发者采取不再兼容ie8以下的浏览器的策略,这使得很多开发者都把眼光放到了flex布局上来,还有就是移动端的快速发展,原本pc端的产品都会移植到移动端上,然而flex在移动端上的兼容很友好。

我相信很多同学都想知道一个问题,我们为什么不使用我们传统的开发形式:使用position和float来进行定位、浮动;却要使用一个对浏览器不是很友好的flex呢?答案非常简单:就是当你理解了它的使用方法时,你就会发现使用flex进行布局非常简单,而且是响应式的,三个字:“快、准、恨”。不过在开发中,偶尔还是会碰到一些块布局不准的问题。

其实我最想说的是“开始详解一下flex的使用”,参考了 阮一峰老师的文章:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

想看图像解说的请移步一峰老师的文章,已经对flex布局有一定的了解,想快速做每个属性或每个属性值的比较、快速复习、快速回忆属性值的,可以浏览这篇文章。


一、父容器的属性设定

1、flex容器的两个主要概念

        水平主轴(main axis)和垂直交叉主轴(cross axis)

这两者是理解flex的开始,必须明白flex是有着这两个东西的,因为在flex父块内的子块的分布顺序排布方式与这两者是紧密关联的,请先记住一个是沿水平方向从左到右(或者从右到左。子元素的开始的位置称为main start,结束为main end)排列子元素的水平主轴,另一个是从上到下(或者从下到上 。子元素的开始的位置称为cross starts,结束为cross end)排列子元素的垂直交叉主轴。

来自一峰老师的博客图

2、在flex容器内可设置的6属性

1、flex-direction   //控制主轴的布局方式(子元素的排列方向)

属性值:

         1、row  //子元素从水平方向的左端开始排列   (默认值)

         2、 row-reverse  //子元素从水平方向的右端开始排列

         3、column    //子元素布局从垂直方向,从上往下

         4、column-reverse  //子元素布局从垂直方向,从下往上

2、flex-wrap //子元素的布局排列的换行设定

属性值:

         1、nowrap  //不换行  (默认值)

         2、wrap //换行,第一行在上方

         3、wrap-reverse // 换行,第一行在下方

3、flex-flow  //前面flex-direction和flex-wrap的组合形式,作用:子元素的排列方式和换                        //行情况的设定

属性值:

         1、flex-wrap  :  row nowrap  //(默认值) 

         2、类似1这种使用flex-direction和flex-wrap的属性值的组合

4、justify-content  //定义子元素在容器内的对齐方式(看一下前面的main start、main end 、cross start、cross end )

属性值:

          1、flex-start  //按flex-direction设置的排列方式的开始位置对齐 (默认值)

          2、flex-end  //按flex-direction设置的排列方式的结束位置对齐

          3、center    //以排列方式的中间点向外扩散的形式,将子元素对齐排列

          4、space-between  //以main(start、end)或者cross(start、end),即布局方                 式的两端作为同时开始的位置,向中间排列,每个子元素之间的间隔相等

          5、space-around  //每个子元素两边都拥有相等间隔,且子元素彼此的间隔不会重               叠,所以子元素之间的间隔比子元素与边框的间隔大一倍

5、align-items  //设定子元素在垂直交叉轴上的对齐形式(flex-direction父类:row)或者水平主轴的对齐形式(flex-direction父类:column)

         1、flex-start //起点对齐

         2、flex-end //终点对齐

         3、center  //中点对齐

         4、baseline //子元素的第一行文字的基线对齐

         5、stretch  //如果子元素未设定高度或者auto,将占满整个容器       (默认值)

6、align-content     //设定子元素在多根轴线情况下的对齐方式

         1、flex-start  //起点对齐

         2、flex-end  //终点对齐

         3、center  //中间点对齐

         4、space-between  //两端对齐,轴线之间的间隔平均分布

         5、space-around  //子元素的两边的间隔都相等,且间隔不会重叠

         6、stretch  //轴线占满整个交叉轴  (默认值)


我想说明的一点是:

我们简单的看这些属性和属性的值是远远不够的,每一个属性都是紧密关联的,在看时,我们应该要是思考一些问题,比如:

     1、flex-direction的优先级是高于justify-content的,我们只有设置了flex-direction(子元素的排列方式),再去考虑justify-content(子元素在容器内的对齐方式),因为justify-content是随flex-direction的变化而变化的。

     2、margin:auto的优先级比justify高

     3、多思考,多尝试写不同属性值的组合


二、子元素的6属性设置

1、order  //定义各个子元素的排列顺序,数值越小,排列越靠前,默认为0,可为负数

     order:-1;(-1、-3、0、1、6、2......任意数字)

2、flex-grow  //定义子元素的放大比例,默认为0(不放大),前提是父容器有空余空间

3、flex-shrink  //定义子元素的缩小比例,默认值为1,不能为负数,前提是父容器有空余空间

4、flex-basis  //在子元素分配空余空间前,设定指定的子元素的空间大小,默认auto(原值)

5、flex  //是flex-grow、flex-shrink、flex-basis的组合,默认值flex:0 1 auto;

6、align-self  //允许单个子元素与其他子元素不一样的对齐方式,可以覆盖父元素设定的align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同stretch(填充满)。

属性值:

         1、auto  //继承父类的align-items的属性值

         2、拥有和align-items一样的5个属性值,作用也是一样的。


请注意:使用flex布局的容器,子元素的float、clear和vertical-align属性将不起作用。

推荐阅读更多精彩内容

  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 1,821评论 0 5
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 2,104评论 0 24
  • Flex(Flexible Box)意为"弹性布局" Webkit 内核的浏览器,必须加上-webkit前缀。 注...
    索哥来了阅读 393评论 0 0
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 9,784评论 1 88
  • 一、使用须知 本文整理自网上的一个flex属性练习小游戏; 除 order 和 align-self 属性是写在子...
    班启阅读 8,997评论 1 9