Cecilia_He
Cecilia_He

css3 flex流动自适应响应式布局实例2

上次简要的说了一些css3中flex的相关概念（详细：css学习16：css3 flex流动自适应响应式布局设计），这次继续说下css3的flex，简单的举几个实例。

一、图片自适应居中

实例图：

实例HTML：

  1. class="demo">
  2. src="http://dummyimage.com/100x100" alt="">
  • class="demo">
  • class="" src="http://dummyimage.com/200x100" alt="">
  • class="demo">
  • src="http://dummyimage.com/100x200" alt="">
  • class="demo">
  • src="http://dummyimage.com/200x200" alt="">
  • class="demo">
  • src="http://dummyimage.com/50x50" alt="">

    • 实例CSS：

     
    .demo{
	width: 100px;
	height: 100px;
	border: 2px solid #ddd;
	background: #f5f5f5;
	padding: 6px;
	float: left;
	margin-left: 20px;

	/*flex布局（作用于容器）*/
	display: flex;

	/*水平居中（作用于容器）*/
	justify-content: center;

	/*垂直居中（作用于容器）*/
	align-items: center;
}

.demo img{
	max-width: 100px;
	max-height: 100px;
	width: auto;
	height: auto;
}

    demo：http://demo.qianduanblog.com/2799/1.html

     二、水平响应式列表

    实例图：

    实例HTML：

    1. class="demo-wrap">
    2. class="demo">
    3. class="item item1">高120px
  • class="item item2">高50px
  • class="item item3">高140px
  • class="item item4">高100px

    • 实例CSS：
    1. .demo-wrap{
    2. border: 2px solid #ddd;
    3. background: #f5f5f5;
    4. padding: 6px;
    5. }
    7. .demo{
    8. width: 100%;
    10. /*flex布局（作用于容器）*/
    11. display: flex;
    13. /*两端对齐（作用于容器）*/
    14. justify-content: space-between;
    15. }
    17. .demo .item{
    18. width: 100px;
    19. background: #ffd;
    20. color: #C90000;
    21. font-size: 20px;
    22. text-align: center;
    23. line-height: 50px;
    24. }
    26. .demo .item1{
    27. height: 120px;
    28. }
    30. .demo .item2{
    31. height: 50px;
    32. }
    34. .demo .item3{
    35. height: 140px;
    36. }
    38. .demo .item4{
    39. height: 100px;
    40. }

    demo：http://demo.qianduanblog.com/2799/2.html

    三、水平响应式列表底端对齐

    和上个例子差不多，只是增加了底端对齐的的特性。

    只是修改了容器的样式：

    1. .demo{
    2. width: 100%;
    4. /*flex布局（作用于容器）*/
    5. display: flex;
    7. /*两端对齐（作用于容器）*/
    8. justify-content: space-around;
    10. /*侧轴方向对齐方式（作用于容器）*/
    11. align-items: flex-end;
    12. }

    demo：http://demo.qianduanblog.com/2799/3.html

    四、多行响应式布局

    宽屏：

    中屏：

    窄屏：

    HTML代码：
    1. class="demo-wrap">
    2. class="demo">
    3. class="item">
    4. class="item">
    5. class="item">
    6. class="item">
    7. class="item">
    8. class="item">
    9. class="item">
    10. class="item">

    CSS代码：

    1. .demo-wrap{
    2. border: 2px solid #ddd;
    3. background: #f5f5f5;
    4. padding: 6px;
    5. }
    7. .demo{
    8. width: 100%;
    10. /*flex布局（作用于容器）*/
    11. display: flex;
    13. /*两端对齐（作用于容器）*/
    14. justify-content: space-around;
    16. /*侧轴方向对齐方式（作用于容器）*/
    17. align-items: flex-end;
    19. /*换行（作用于容器）*/
    20. flex-wrap: wrap;
    21. }
    23. .demo .item{
    24. width: 300px;
    25. height: 50px;
    26. background: #444;
    27. margin-bottom: 20px;
    28. }

    demo：http://demo.qianduanblog.com/2799/4.html

    五、左固定右自适应等高布局

    演示截图：

    HTML：
    1. class="demo">
    2. class="left">左边固定宽度为100px，这里设置了高度为auto
    3. class="right">右边宽度自适应，并且左右两个区域是等高的，这里设置了高度为200px

    CSS：

    1. .demo{
    2. /*flex布局（作用于容器）*/
    3. display: flex;
    5. /*项目拉伸对齐，也就是所左边的高度为拉伸到和右边等高，默认是拉伸的*/
    6. /*align-items: stretch;*/
    7. }
    9. .demo .left{
    10. /*左边固定宽度，必须设置其最小宽度和最大宽度*/
    11. width: 100px;
    12. min-width: 100px;
    13. max-width: 100px;
    15. /*高度自由分配*/
    16. height: auto;
    17. background: #B4D3F7;
    19. /*空白区域分配比例为0（作用于项目）*/
    20. flex-grow: 0;
    21. }
    23. .demo .right{
    24. margin-left: 10px;
    25. width: auto;
    26. height: 200px;
    27. background: #F7E8B4;
    29. /*空白区域分配比例为1（作用于项目）
    30. 左右得到的空白比例为0:1，所以右边会分配到剩余的所有空白区域，
    31. 左边成固定的宽度，右边为自适应宽度*/
    32. flex-grow: 1;
    33. }

    demo：http://demo.qianduanblog.com/2799/5.html

    六、左右固定中间自适应宽度底部对齐布局

    上面的例子是左右布局的，相比较而言，双栏布局会做了，那么三栏布局也就不是问题了。先看实例图：

    HTML：
    1. class="demo">
    2. class="left">左边固定宽度为100px，这里设置了高度为auto
    3. class="center">中间宽度自适应，并且左中右两个区域是等高的，这里设置了高度为200px
    4. class="right">右边固定宽度为150px，这里设置了高度为auto

    CSS：

     
  
       
   
    1. .demo{
      2.  
   
    2.  /*flex布局（作用于容器）*/
      3.  
   
    3.  display: flex;
      4.  
   
    4.  
      5.  
   
    5.  /*项目拉伸对齐，也就是所左边的高度为拉伸到和右边底部对齐*/
      6.  
   
    6.  align-items: flex-end;
      7.  
   
    7. }
      8.  
   
    8.  
      9.  
   
    9. .demo .left{
      10.  
   
    10.  /*左边固定宽度，必须设置其最小宽度和最大宽度*/
      11.  
   
    11.  width: 100px;
      12.  
   
    12.  min-width: 100px;
      13.  
   
    13.  max-width: 100px;
      14.  
   
    14.  
      15.  
   
    15.  /*高度自由分配*/
      16.  
   
    16.  height: auto;
      17.  
   
    17.  background: #B4D3F7;
      18.  
   
    18.  
      19.  
   
    19.  /*空白区域分配比例为0（作用于项目）*/
      20.  
   
    20.  flex-grow: 0;
      21.  
   
    21. }
      22.  
   
    22.  
      23.  
   
    23. .demo .center{
      24.  
   
    24.  margin: 0 10px;
      25.  
   
    25.  width: auto;
      26.  
   
    26.  height: 200px;
      27.  
   
    27.  background: #F7E8B4;
      28.  
   
    28.  
      29.  
   
    29.  /*空白区域分配比例为1（作用于项目）
      30.  
   
    30.  左右得到的空白比例为0:1，所以右边会分配到剩余的所有空白区域，
      31.  
   
    31.  左边成固定的宽度，右边为自适应宽度*/
      32.  
   
    32.  flex-grow: 1;
      33.  
   
    33. }
      34.  
   
    34.  
      35.  
   
    35. .demo .right{
      36.  
   
    36.  /*右边固定宽度，必须设置其最小宽度和最大宽度*/
      37.  
   
    37.  width: 150px;
      38.  
   
    38.  min-width: 150px;
      39.  
   
    39.  max-width: 150px;
      40.  
   
    40.  
      41.  
   
    41.  /*高度自由分配*/
      42.  
   
    42.  height: auto;
      43.  
   
    43.  background: #CBFFD2;
      44.  
   
    44.  
      45.  
   
    45.  /*空白区域分配比例为0（作用于项目）*/
      46.  
   
    46.  flex-grow: 0;
      47.  
   
    47. }
      48.  
  
     
  
     demo：http://demo.qianduanblog.com/2799/6.html
     
  
     
     
  
     原文地址：http://qianduanblog.com/post/css-learning-18-css3-flex-responsive-design-example.html
     
  

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