html5中文学习网

您的位置: 首页 > html5资讯 > 最新资讯 » 正文

css3 flex流动自适应响应式布局设计

[ ] 已经帮助:人解决问题

可以先看看css3 flex的实例:/post/css-learning-18-css3-flex-responsive-design-example.htmlSs4HTML5中文学习网 - HTML5先行者学习网

一、flex应运而生

HTML是骨骼、架构,CSS是肌肉、美妆,JS是运动、表现。他们的互相配合才诞生了成千上万的网页,丰富多彩的前端世界让前端开发人员越来越痴迷。尤其是HTML5、CSS3的出现,更加让这种感觉越来越深厚。Ss4HTML5中文学习网 - HTML5先行者学习网

在以往要排版一个图片、文字的列表,如:Ss4HTML5中文学习网 - HTML5先行者学习网

 Ss4HTML5中文学习网 - HTML5先行者学习网

Ss4HTML5中文学习网 - HTML5先行者学习网

在做这样的贴边均匀等分列表,一般有2种做法。Ss4HTML5中文学习网 - HTML5先行者学习网

1、浮动方法(普通)

采 用ul>li的DOM结构,li左浮动(ie6需要设置为行内样式)。假设ul的宽度为W,每个li项目的总宽度是x,每一行有4个项目。为了让每 一行的第一个li都贴边对齐,那么就需要设置ul左边距为负值。可得,li之间的左边距ML=(W-x*4)/4。详细代码如下:Ss4HTML5中文学习网 - HTML5先行者学习网

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <link rel="stylesheet" href="http://static.qianduanblog.com/css/3/last.css">
  6. <title>贴边的均匀等分列表1</title>
  7. <style>
  8. .container{
  9. margin: 50px auto;
  10. width: 700px;
  11. overflow: hidden;
  12. }
  13. .container ul{
  14. width: 700px;
  15. margin: 0 auto;
  16. margin-left: -75px;
  17. background: #DEF3FF;
  18. }
  19. .container li{
  20. width: 100px;
  21. margin-left: 75px;
  22. margin-bottom: 20px;
  23. }
  24. .container .img{
  25. width: 100px;
  26. height: 100px;
  27. }
  28. .container .title{
  29. height: 20px;
  30. line-height: 20px;
  31. text-align: center;
  32. }
  33. </style>
  34. </head>
  35. <body>
  36. <div class="container">
  37. <ul class="clearfix">
  38. <li class="pull-left">
  39. <p class="img"><img src="http://dummyimage.com/100x100" alt=""></p>
  40. <p class="title"><a href="#">标题名称</a></p>
  41. </li>
  42. <li class="pull-left">
  43. <p class="img"><img src="http://dummyimage.com/100x100" alt=""></p>
  44. <p class="title"><a href="#">标题名称</a></p>
  45. </li>
  46. <li class="pull-left">
  47. <p class="img"><img src="http://dummyimage.com/100x100" alt=""></p>
  48. <p class="title"><a href="#">标题名称</a></p>
  49. </li>
  50. <li class="pull-left">
  51. <p class="img"><img src="http://dummyimage.com/100x100" alt=""></p>
  52. <p class="title"><a href="#">标题名称</a></p>
  53. </li>
  54. <li class="pull-left">
  55. <p class="img"><img src="http://dummyimage.com/100x100" alt=""></p>
  56. <p class="title"><a href="#">标题名称</a></p>
  57. </li>
  58. <li class="pull-left">
  59. <p class="img"><img src="http://dummyimage.com/100x100" alt=""></p>
  60. <p class="title"><a href="#">标题名称</a></p>
  61. </li>
  62. <li class="pull-left">
  63. <p class="img"><img src="http://dummyimage.com/100x100" alt=""></p>
  64. <p class="title"><a href="#">标题名称</a></p>
  65. </li>
  66. <li class="pull-left">
  67. <p class="img"><img src="http://dummyimage.com/100x100" alt=""></p>
  68. <p class="title"><a href="#">标题名称</a></p>
  69. </li>
  70. </ul>
  71. </div>
  72. </body>
  73. </html>

上述代码,ul应占用的宽度为700px,每个li的宽度是100px,每行4个,有3个空隙,如果要贴边对齐,就再加一个。每个空隙的宽度为(700-100*4)/4=75px。Ss4HTML5中文学习网 - HTML5先行者学习网

2、两端对齐方法(另类)

两端对齐方法采用的是css2中text-align:textify; 属性,它具有良好的文字排版效果,就像word里的两端对齐一样,表现效果也一致。Ss4HTML5中文学习网 - HTML5先行者学习网

 Ss4HTML5中文学习网 - HTML5先行者学习网

Ss4HTML5中文学习网 - HTML5先行者学习网

一 般认为,两端对齐只对行内样式起作用,而CSS当中是可以重置任意元素为行内或者块状样式的。要想目标群体两端对齐,那么就需要设置所有项目的 display为inline-block(行内块状样式)。因为每一行要两端对齐,每行四个项目li,那么每个项目li占用的宽度就是25%,但在实际 情况中,因为要处理空白的缘故,写20~24%都是比较合理的,下面例子就是一个简单的说明。Ss4HTML5中文学习网 - HTML5先行者学习网

在这里需要注意的是,设置两端对齐,项目之间的空白需要额外处理。设置ul的字体大小为0即可。更多详细可以参考:http://www.w3cplus.com/css/text-align-justify-and-rwd.htmlSs4HTML5中文学习网 - HTML5先行者学习网

详细的页面代码如下:Ss4HTML5中文学习网 - HTML5先行者学习网

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <link rel="stylesheet" href="http://static.qianduanblog.com/css/3/last.css">
  6. <title>贴边的均匀等分列表2</title>
  7. <style>
  8. .container{
  9. margin: 50px auto;
  10. width: 600px;
  11. overflow: hidden;
  12. }
  13. .container ul{
  14. width: 600px;
  15. margin: 0 auto;
  16. background: #DEF3FF;
  17. font-size: 0;
  18. text-align: justify;
  19. }
  20. .container li{
  21. width: 24%;
  22. margin-bottom: 20px;
  23. display: inline-block;
  24. *display: inline;
  25. *zoom: 1;
  26. background: #C23A3A;
  27. }
  28. .container .inner,
  29. .container .img{
  30. width: 100px;
  31. height: 100px;
  32. }
  33. .container .title{
  34. height: 20px;
  35. line-height: 20px;
  36. text-align: center;
  37. font-size: 14px;
  38. }
  39. .container .break-li{
  40. height: 0;
  41. width: 100%;
  42. }
  43. </style>
  44. </head>
  45. <body>
  46. <div class="container">
  47. <ul class="clearfix">
  48. <li>
  49. <div class="inner">
  50. <p class="img"><img src="http://dummyimage.com/100x100" alt=""></p>
  51. <p class="title"><a href="#">标题名称</a></p>
  52. </div>
  53. </li>
  54. <li>
  55. <div class="inner">
  56. <p class="img"><img src="http://dummyimage.com/100x100" alt=""></p>
  57. <p class="title"><a href="#">标题名称</a></p>
  58. </div>
  59. </li>
  60. <li>
  61. <div class="inner">
  62. <p class="img"><img src="http://dummyimage.com/100x100" alt=""></p>
  63. <p class="title"><a href="#">标题名称</a></p>
  64. </div>
  65. </li>
  66. <li>
  67. <div class="inner">
  68. <p class="img"><img src="http://dummyimage.com/100x100" alt=""></p>
  69. <p class="title"><a href="#">标题名称</a></p>
  70. </div>
  71. </li>
  72. <li>
  73. <div class="inner">
  74. <p class="img"><img src="http://dummyimage.com/100x100" alt=""></p>
  75. <p class="title"><a href="#">标题名称</a></p>
  76. </div>
  77. </li>
  78. <li>
  79. <div class="inner">
  80. <p class="img"><img src="http://dummyimage.com/100x100" alt=""></p>
  81. <p class="title"><a href="#">标题名称</a></p>
  82. </div>
  83. </li>
  84. <li>
  85. <div class="inner">
  86. <p class="img"><img src="http://dummyimage.com/100x100" alt=""></p>
  87. <p class="title"><a href="#">标题名称</a></p>
  88. </div>
  89. </li>
  90. <li>
  91. <div class="inner">
  92. <p class="img"><img src="http://dummyimage.com/100x100" alt=""></p>
  93. <p class="title"><a href="#">标题名称</a></p>
  94. </div>
  95. </li>
  96. <li class="break-li"></li>
  97. </ul>
  98. </div>
  99. </body>
  100. </html>

这种方法工程量比较大,结果如下图:Ss4HTML5中文学习网 - HTML5先行者学习网

 Ss4HTML5中文学习网 - HTML5先行者学习网

Ss4HTML5中文学习网 - HTML5先行者学习网

上面说的例子是前端开发中遇到最多的情况,处理的方式也多种多样,并不局限于以上2种。前端开发中要处理的排版是比较多的,上下排版最简单,左右排版比较麻烦一点,均匀分布、错位排版是最难处理的,我们需要处理和计算各种宽度,这是一个很繁重的过程。Ss4HTML5中文学习网 - HTML5先行者学习网

二、什么是flex

在这种情况,CSS3的flex属性应运而生了。它的作用是能够按照设置好的规则来排列容器内的项目,而不必去计算每一个项目的宽度和边距。甚至是在容器的大小发生改变的时候,都可以重新计算,以至于更符合预期的排版。不仅解放了计算器,而且更加优美的服务于响应式设计。Ss4HTML5中文学习网 - HTML5先行者学习网

在使用了flex属性之后,居左对齐、居右对齐、两端对齐、居中对齐、顶端对齐、底部对齐,以及处理项目之间的空白和项目宽度、高度的伸缩都可以简单的设置到。Ss4HTML5中文学习网 - HTML5先行者学习网

flex的字面意思是,伸缩性的、弯曲的,引申含义为可自由配置的、灵活的意思。CSS3中的flex属性也是这么理解,具有flex属性的容器和容器内的项目都具有弹性计算的能力,以至于符合预定的规则。Ss4HTML5中文学习网 - HTML5先行者学习网

三、flex属性

flex是display的属性值,目前还处于草稿状态中,所以在书写的时候,需要加上各个浏览器的私有前缀,即-webkit、-moz、-ms、-o等,下面的例子都省略了前缀。Ss4HTML5中文学习网 - HTML5先行者学习网

flex属性的命名可谓是一波三折:Ss4HTML5中文学习网 - HTML5先行者学习网

  • 2009年以前:display:box;
  • 2011年:display:flex-box;
  • 2012年:display:flex;

目前的格式为:Ss4HTML5中文学习网 - HTML5先行者学习网

  1. .container{
  2. display: -webkit-flex;
  3. display: -moz-flex;
  4. display: -ms-flex;
  5. display: flex;
  6. }

1、流动布局

 Ss4HTML5中文学习网 - HTML5先行者学习网

Ss4HTML5中文学习网 - HTML5先行者学习网

一个设有「display:flex」或「display:inline-flex」的元素是一个伸缩容器,伸缩容器的子元素被称为伸缩项目,这些 子元素使用伸缩布局模型来排版。与布局计算偏向使用书写模式方向的块布局与行内布局不同,伸缩布局偏向使用伸缩流的方向。「flex-flow」的值决定 了这些术语如何对应到物理方向(上/右/下/左)、物理轴(垂直/水平)、物理大小(宽度/高度)。——来自 http://www.w3.org/html/ig/zh/wiki/Css3-flexbox/zh-hansSs4HTML5中文学习网 - HTML5先行者学习网

详细说明如下:Ss4HTML5中文学习网 - HTML5先行者学习网

  • 主轴、主轴方向:用户代理沿着一个伸缩容器的主轴配置伸缩项目,主轴是主轴方向的延伸。
  • 主轴起点、主轴终点:伸缩项目的配置从容器的主轴起点边开始,往主轴终点边结束。
  • 主轴长度、主轴长度属性:伸缩项目的在主轴方向的宽度或高度就是项目的主轴长度,伸缩项目的主轴长度属性是「width」或「height」属性,由哪一个对着主轴方向决定。
  • 侧轴、侧轴方向:与主轴垂直的轴称作侧轴,是侧轴方向的延伸。
  • 侧轴起点、侧轴终点:填满项目的伸缩行的配置从容器的侧轴起点边开始,往侧轴终点边结束。
  • 侧轴长度、侧轴长度属性:伸缩项目的在侧轴方向的宽度或高度就是项目的侧轴长度,伸缩项目的侧轴长度属性是「width」或「height」属性,由哪一个对着侧轴方向决定。

注意:CSS的columns在伸缩容器上没有效果。floatclearvertical-align在伸缩项目上没有效果。Ss4HTML5中文学习网 - HTML5先行者学习网

2、flex容器属性

2.1、display(应用于flex属性)

  • flex:相当于block
  • inline-flex:相当于inline-block

2.2、flex-direction(流动布局的主轴方向)

  • row(默认):行方向,在“ltr”(left-to-right)排版方式下从左向右排列;在“rtl”(right-to-left)排版方式下从右向左排列。
  • row-reverse:行反方向,与row排列方向相反。在“ltr”(left-to-right)排版方式下从右向左排列;在“rtl”(right-to-left)排版方式下从左向右排列。
  • column:列方向,与行方向垂直。在“ttb”(top-to-bottom)排版方式下从上向下排列;在“btt”(bottom-to-top)排版方式下从下向上排列。
  • column-reverse:类似于row-reverse,与column排列方向相反。在“ttb”(top-to-bottom)排版方式下从下向上排列;在“btt”(bottom-to-top)排版方式下从上向下排列。

2.3、flex-wrap(流动布局的侧轴方向)

  • nowrap(默认):无侧轴,即不换行。
  • wrap:侧轴垂直于主轴。在“ltr”、“rtl”排版方式下,侧轴方向向下;在“ttb”、“btt”排版方式下,侧轴方向向左。
  • wrap-inverse:与wrap属性相反。

2.4、flex-flow(“flex-direction”和“flex-wrap”属性的缩写)

row nowrap为其默认属性值,分别表示flex-direction和flex-wrap属性。Ss4HTML5中文学习网 - HTML5先行者学习网

2.5、justify-content(主轴方向内容对齐方式)

  • flex-srart(默认):与主轴起始方向对齐。
  • flex-end:向主轴终点方向对齐。
  • center:向主轴中点方向对齐。
  • space-between:起始位置向主轴起始方向对齐,终点位置向主轴终点方向对齐,其余位置向主轴中点方向对齐。
  • space-around:与space-between类似,只是起始位置和终点位置保留一半空白。

以上描述,参考下图:Ss4HTML5中文学习网 - HTML5先行者学习网

 Ss4HTML5中文学习网 - HTML5先行者学习网

Ss4HTML5中文学习网 - HTML5先行者学习网

2.6、align-content(多个主轴沿侧轴方向的内容堆栈对齐方式)

  • flex-start:多个主轴沿侧轴起始方向对齐。
  • flex-end:多个主轴沿侧轴终点方向对齐。
  • center:多个主轴沿侧轴中点方向对齐。
  • space-between:第一个主轴沿主轴起始方向对齐,末尾主轴沿主轴终点方向对齐,其他主轴均匀分布对齐。
  • space-around:与space-between类似,只是侧轴起始位置和侧轴终点位置保留一半空白。
  • stretch(默认):伸缩多个主轴,保持侧轴方向统一距离。

以上描述,参考下图:Ss4HTML5中文学习网 - HTML5先行者学习网

 Ss4HTML5中文学习网 - HTML5先行者学习网

Ss4HTML5中文学习网 - HTML5先行者学习网

2.7、align-items(侧轴方向内容对齐方式)

与justify-content类似,只是这里的参考方向为侧轴。Ss4HTML5中文学习网 - HTML5先行者学习网

  • stretch(默认):在侧轴方向拉伸每个项目,使每个项目保持相同的起始位置和终点位置。
  • flex-srart:与侧轴起始方向对齐。
  • flex-end:向侧轴终点方向对齐。
  • center:向侧轴中点方向对齐。
  • baseline:在侧轴上保持基线对齐,以第一个项目的基线为准。

以上描述,参考下图:Ss4HTML5中文学习网 - HTML5先行者学习网

 Ss4HTML5中文学习网 - HTML5先行者学习网

Ss4HTML5中文学习网 - HTML5先行者学习网

3、flex项目属性

3.1、order(排序)

整数,默认为0,负无穷到正无穷。容器中的项目都是依order值从小到大排列,order值越大越就越在主轴方向的末尾。比如:Ss4HTML5中文学习网 - HTML5先行者学习网

3.2、flex-grow(空白空间分配比例)

大于0的正数值。Ss4HTML5中文学习网 - HTML5先行者学习网

3.3、flex-shrink(项目空间分配比例)

大于0的正数值。Ss4HTML5中文学习网 - HTML5先行者学习网

3.4、flex-basis(项目的主轴方向长度)

如果项目制定了实际长度,则此长度为主。否则为自动计算长度。默认为auto。Ss4HTML5中文学习网 - HTML5先行者学习网

3.5、flex(flex-grow、flex-shrink和flex-basis三个属性的简写)

格式为:flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]Ss4HTML5中文学习网 - HTML5先行者学习网

3.6、align-self(项目在侧轴方向的对齐方式)

参考于容器的align-items(2.7)。Ss4HTML5中文学习网 - HTML5先行者学习网

四、更多阅读

五、参考资料

(责任编辑:)
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助