Cecilia_He
Cecilia_He

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

可以先看看css3 flex的实例：/post/css-learning-18-css3-flex-responsive-design-example.html。

一、flex应运而生

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

在以往要排版一个图片、文字的列表，如：

在做这样的贴边均匀等分列表，一般有2种做法。

1、浮动方法（普通）

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

  2. lang="en">
  4. charset="UTF-8">
  5. rel="stylesheet" href="http://static.qianduanblog.com/css/3/last.css">
  6. </span><span class="pln" style="color:rgb(72,72,76);">贴边的均匀等分列表1</span><span class="tag" style="color:rgb(30,52,123);">
  10. class="container">
  11. class="clearfix">
  12. class="pull-left">
  13. class="img"> src="http://dummyimage.com/100x100" alt="">

  14. class="title"> href="#">标题名称

  16. class="pull-left">
  17. class="img"> src="http://dummyimage.com/100x100" alt="">

  18. class="title"> href="#">标题名称

  20. class="pull-left">
  21. class="img"> src="http://dummyimage.com/100x100" alt="">

  22. class="title"> href="#">标题名称

  24. class="pull-left">
  25. class="img"> src="http://dummyimage.com/100x100" alt="">

  26. class="title"> href="#">标题名称

  28. class="pull-left">
  29. class="img"> src="http://dummyimage.com/100x100" alt="">

  30. class="title"> href="#">标题名称

  32. class="pull-left">
  33. class="img"> src="http://dummyimage.com/100x100" alt="">

  34. class="title"> href="#">标题名称

  36. class="pull-left">
  37. class="img"> src="http://dummyimage.com/100x100" alt="">

  38. class="title"> href="#">标题名称

  40. class="pull-left">
  41. class="img"> src="http://dummyimage.com/100x100" alt="">

  42. class="title"> href="#">标题名称

    • 上述代码，ul应占用的宽度为700px，每个li的宽度是100px，每行4个，有3个空隙，如果要贴边对齐，就再加一个。每个空隙的宽度为(700-100*4)/4=75px。

    2、两端对齐方法（另类）

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

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

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

    详细的页面代码如下：
    2. lang="en">
    4. charset="UTF-8">
    5. rel="stylesheet" href="http://static.qianduanblog.com/css/3/last.css">
    6. </span><span class="pln" style="color:rgb(72,72,76);">贴边的均匀等分列表2</span><span class="tag" style="color:rgb(30,52,123);">
    10. class="container">
    11. class="clearfix">
    14. class="inner">
    15. class="img"> src="http://dummyimage.com/100x100" alt="">

    16. class="title"> href="#">标题名称

  • class="inner">
  • class="img"> src="http://dummyimage.com/100x100" alt="">

  • class="title"> href="#">标题名称

  • class="inner">
  • class="img"> src="http://dummyimage.com/100x100" alt="">

  • class="title"> href="#">标题名称

  • class="inner">
  • class="img"> src="http://dummyimage.com/100x100" alt="">

  • class="title"> href="#">标题名称

  • class="inner">
  • class="img"> src="http://dummyimage.com/100x100" alt="">

  • class="title"> href="#">标题名称

  • class="inner">
  • class="img"> src="http://dummyimage.com/100x100" alt="">

  • class="title"> href="#">标题名称

  • class="inner">
  • class="img"> src="http://dummyimage.com/100x100" alt="">

  • class="title"> href="#">标题名称

  • class="inner">
  • class="img"> src="http://dummyimage.com/100x100" alt="">

  • class="title"> href="#">标题名称

  • class="break-li">

    • 这种方法工程量比较大，结果如下图：

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

    二、什么是flex

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

    在使用了flex属性之后，居左对齐、居右对齐、两端对齐、居中对齐、顶端对齐、底部对齐，以及处理项目之间的空白和项目宽度、高度的伸缩都可以简单的设置到。

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

    三、flex属性

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

    flex属性的命名可谓是一波三折：

    目前的格式为：

     
  
       
   
    1. .container{
      2.  
   
    2.  display: -webkit-flex;
      3.  
   
    3.  display: -moz-flex;
      4.  
   
    4.  display: -ms-flex;
      5.  
   
    5.  display: flex;
      6.  
   
    6. }
      7.  
  
     
  
     1、流动布局
     
  
     
     
  
     
     
  
     
   
    一个设有「display:flex」或「display:inline-flex」的元素是一个伸缩容器，伸缩容器的子元素被称为伸缩项目，这些子元素使用伸缩布局模型来排版。与布局计算偏向使用书写模式方向的块布局与行内布局不同，伸缩布局偏向使用伸缩流的方向。「flex-flow」的值决定了这些术语如何对应到物理方向（上／右／下／左）、物理轴（垂直／水平）、物理大小（宽度／高度）。——来自 http://www.w3.org/html/ig/zh/wiki/Css3-flexbox/zh-hans
     
  
     
  
     详细说明如下：
     
   
  
     
   
    注意：CSS的columns在伸缩容器上没有效果。float、clear和vertical-align在伸缩项目上没有效果。
     
  
     
  
     2、flex容器属性
     
  
     2.1、display（应用于flex属性）
     
   
  
     2.2、flex-direction（流动布局的主轴方向）
     
   
  
     2.3、flex-wrap（流动布局的侧轴方向）
     
   
  
     2.4、flex-flow（“flex-direction”和“flex-wrap”属性的缩写）
     
  
     row nowrap为其默认属性值，分别表示flex-direction和flex-wrap属性。
     
  
     2.5、justify-content（主轴方向内容对齐方式）
     
   
  
     以上描述，参考下图：
     
  
     
     
  
     
     
  
     2.6、align-content（多个主轴沿侧轴方向的内容堆栈对齐方式）
     
   
  
     以上描述，参考下图：
     
  
     
     
  
     
     
  
     2.7、align-items（侧轴方向内容对齐方式）
     
  
     与justify-content类似，只是这里的参考方向为侧轴。
     
   
  
     以上描述，参考下图：
     
  
     
     
  
     
     
  
     3、flex项目属性
     
  
     3.1、order（排序）
     
  
     整数，默认为0，负无穷到正无穷。容器中的项目都是依order值从小到大排列，order值越大越就越在主轴方向的末尾。比如：
     
  
     3.2、flex-grow（空白空间分配比例）
     
  
     大于0的正数值。
     
  
     3.3、flex-shrink（项目空间分配比例）
     
  
     大于0的正数值。
     
  
     3.4、flex-basis（项目的主轴方向长度）
     
  
     如果项目制定了实际长度，则此长度为主。否则为自动计算长度。默认为auto。
     
  
     3.5、flex（flex-grow、flex-shrink和flex-basis三个属性的简写）
     
  
     格式为：flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
     
  
     3.6、align-self（项目在侧轴方向的对齐方式）
     
  
     参考于容器的align-items（2.7）。
     
  
     四、更多阅读
     
   
  
     五、参考资料
     
   
  
     
   
  
     
   
     
  
     
  
     
   原文地址： 
  
     
  
     
   http://qianduanblog.com/post/css-learning-16-css3-flex-responsive-design.html
     
  
     
  
     
  

                            
                        
                    
                    
                    
    
                    
                    
                    
    
                
                
    
                    
                
    
            
        
    
    
    
        
    你可能感兴趣的:(web前端)