从以前的table布局到现在的div布局,再到未来的flex布局,CSS重构方面对展示行和适应性的要求越来越高;

  首先来比较一下布局方式的更新意义:

    table布局:

      优点:1、兼容性好,ie6、ie7或者什么稀奇古怪的浏览器,table布局可以用最小的代价兼容这些稀奇古怪的浏览器;

           2、自适应性,根据内容自适应内部元素的宽高;

         3、开发时间短;

      缺点:1、table嵌套table,性能差;

         2、对SEO不友好;

         3、样式可塑性差,无法准确实现设计图效果;

         4、不利于后期维护;

    div+css布局:

      优点:1、页面代码精简。加载速度得到很大的提高

         2、对于开发者来说,代码精简,便于阅读和维护

         3、利于SEO优化;

      缺点:对于列表类的内容,无法自适应添加列,添加列时,得重新计算每个元素的宽度,重新设置CSS;
 
    flexbox布局:(应该算是div+css的进阶)
      优点:1、灵活方便,功能强大,不管是纵向横向,自适应宽高,Flexbox 就是一种“弹性布局”模型,能很好支持不同视口尺寸和设备。
      缺点:1、兼容性差,兼容情况如下图;
         2、容器、项目中属性设置内容比较多,需多加练习;
 
 
  属性详解:
    1、flexbox容器属性:(父级):
      Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。

Webkit内核的浏览器,必须加上-webkit前缀。
.box{
display: -webkit-flex; /* Safari */
display: flex;
}

      ①、flex-direction: row | row-reverse | column | column-reverse;

        决定主轴的方向(即项目的排列方向)。分别为沿主轴从左往右、沿主轴从右往左、沿交叉轴从上往下、沿交叉轴从下往上。

        

      ②、flex-wrap:nowrap | wrap | wrap-reverse;

        (默认)nowrap 不换行;  warp:换行; wrap-reverse:换行后,第一行在下方,或者右方(column方式的话);

      ③、flex-flow:<flex-direction> || <flex-wrap>;

        flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为flex-flow: row nowrap。

      ④、justify-content:flex-start | flex-end | center | space-between | space-around;        

        flex-start(默认值):左对齐
        flex-end:右对齐
        center: 居中
        space-between:两端对齐,项目之间的间隔都相等。
        space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

        

      ⑤、align-items: flex-start | flex-end | center | baseline | stretch;

        flex-start:交叉轴的起点对齐。
        flex-end:交叉轴的终点对齐。
        center:交叉轴的中点对齐。
        baseline: 项目的第一行文字的基线对齐。
        stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

        align-items属性定义项目在交叉轴上如何对齐。如果项目没有设置高度,默认的stretch会让项目充满整个容器;

        

      ⑥、align-content: flex-start | flex-end | center | space-between | space-around | stretch;

        align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

        flex-start:与交叉轴的起点对齐。
        flex-end:与交叉轴的终点对齐。
        center:与交叉轴的中点对齐。
        space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
        space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
        stretch(默认值):轴线占满整个交叉轴。

         

    2、flexitem项目属性:(子级):
      ①、order:属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。可以为赋值。
        

      ②、flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

        如果所有的子项目的flex-grow属性都设置为1,则会它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。

        

      ③、flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

        如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。

        如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。负值无效。

        

      ④、flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。

        浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。

        

      ⑤、flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];

        flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。

        该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。

        后两个属性可选。常用方式:flex: 1;

        

      ⑥、align-self: auto | flex-start | flex-end | center | baseline | stretch;

        align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。

        

 
  特别的用法:
    一、移动端顶部左中右布局方式
      

    二、均等分间距设置

      

 
       display:flex 多栏多列布局
         
注意:在使用flebox布局时,子元素必须保证为display:block; 不然在X5内核浏览器中无法自适应间距;
  项目中使用一个ul 包含 5个li,就是因为设置了li display:inline-block导致横向无法适应间距;
还有 flexbox的兼容写法:
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-box-pack:justify;
-webkit-justify-content:space-between;
-ms-flex-pack:justify;
justify-content:space-between;

  

display:flex;多行多列布局学习的更多相关文章

  1. display:flex 多栏多列布局

    转自:http://www.360doc.com/content/14/0811/01/2633_400926000.shtml display:flex 多栏多列布局浏览器支持情况:火狐直接支持w3 ...

  2. 弹性盒模型:flex多行多列两端对齐,列不满左对齐

    [1]需求: [2]解决方案: 最近遇到布局上要求item两端对齐,且最后一行在列不满的情况下要求左对齐,使用flex的justify-content: space-between;实现时发现最后一行 ...

  3. 两列布局(浮动、定位、flex)和三列布局(圣杯、双飞翼、flex)

    demo 各种布局演示 https://jsfiddle.net/mayufo/qp890peq/1/ 两栏布局 浮动 <div class="box1"> <d ...

  4. flex几种多列布局

    基本的等分三列布局 .container{ display: flex; width: 500px; height: 200px; } .left{ flex:1; background: red; ...

  5. day32—CSS多列布局学习

    转行学开发,代码100天——2018-04-17 关于多列布局,前期已经梳理过,今天的培训课程学习中再次提及,趁此也做个总结和检验. 多列布局的介绍参考: day08—css布局解决方案之多列布局   ...

  6. SQL 行转列 PIVOT 学习示例

    CREATE TABLE [StudentScores] ( ), --学生姓名 ), --科目 [Score] FLOAT, --成绩 ) select * from [StudentScores] ...

  7. 土旦:关于display:flex碰上white-space nowrap 影响布局的问题

    背景,做一个前面图片宽度固定,后面宽度自适应,使用到了flex布局,但是想让后面div里文字不换行,超出以点点表示时,这时布局就乱了,查了下,原来flex布局与white-space:nowrap有影 ...

  8. 多栏多列布局(display:flex)

    display:flex 多栏多列布局浏览器支持情况:火狐直接支持w3c无前缀写法,谷歌和opera支持-webkit- 前缀写法,比较适合移动端开发使用, display:flex 这个牛逼的css ...

  9. CSS弹性盒布局(display:flex)

    CSS弹性布局(display:flex) 参考: http://www.runoob.com/w3cnote/flex-grammar.html https://www.jianshu.com/p/ ...

随机推荐

  1. mysql5.7.11安装遇到的问题

    首次安装mysql5.7.11绿色版,真是破费功夫,现记录安装中遇到的问题,只是解决了问题,而不清楚问题的由来. 问题一: 问题二: 问题三: 问题四: 我的my.ini配置文件: [mysql] # ...

  2. 【洛谷 P1666】 前缀单词 (Trie)

    题目链接 考试时暴搜50分...其实看到"单词","前缀"这种字眼时就要想到\(Trie\)的,哎,我太蒻了. 以一个虚点为根,建一棵\(Trie\),然后\( ...

  3. [转]树莓派gpio口控制

    0.前言     树莓派现在越来越火,网上树莓派的资料也越来越多.树莓派源自英国,国外嵌入式开源领域具有良好的分享精神,树莓派各种集成库也层出不穷,下面推荐几个. [[开发语言]——python [[ ...

  4. cpu_relax( )-----对自选循环等待(spin-wait loops)操作的优化【转】

    cpu_relax()-----对自选循环等待(spin-wait loops)操作的优化 转自:http://www.doc100.net/bugs/t/173547/index.html 在loc ...

  5. Linux上Core Dump文件的形成和分析

    原文: http://baidutech.blog.51cto.com/4114344/904419 Core,又称之为Core Dump文件,是Unix/Linux操作系统的一种机制,对于线上服务而 ...

  6. 冒泡排序的思想 python 冒泡排序、递归排序

    冒泡排序的时间复杂度是O(N^2) 冒泡排序的思想: 每次比较两个相邻的元素, 如果他们的顺序错误就把他们交换位置 比如有五个数: 12, 35, 99, 18, 76, 从大到小排序, 对相邻的两位 ...

  7. 关于ES6(ES2015)开发记坑

    ES2015(以下简称ES6)在开发过程中遇到的问题: 1,必须显示声明变量 //es5中可解释为全局变量 a=5; //es6中报错:a is not defined a=5 2,对于递归调用方式必 ...

  8. win7或win2008系统中,出现【已停止工作,联机检查解决方案并关闭该程序,关闭程序】解决方法!

    win7或win2008系统中,出现[已停止工作,联机检查解决方案并关闭该程序,关闭程序]解决方法! 经过摸索,点击[控制面板]-[操作中心]-[更改操作中心设置]-[问题报告设置]-[从不检查解决方 ...

  9. 漫谈网络通信——从OSI网络模型到TCP/IP协议族

    OSI七层模型 OSI(Open System Interconnection,开放系统互联)七层网络模型成为开放式系统互联参考模型,是一个把网络通信在逻辑上的定义,也可以理解成为定义了通用的网络通信 ...

  10. (一)mysql基础和安装mysql5.7

    (1)数据库系统 RDS:关系型,oracle,mysql,mariaDB,percona server ,DB2 NoSQL:Redis,MongoDB,memcache (2)SQL语言:结构化查 ...