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

时间:2022-11-11 10:19:50

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

一、图片自适应居中

实例图:

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

实例HTML:

 
 
  1. <div class="demo">
  2. <img src="http://dummyimage.com/100x100" alt="">
  3. </div>
  4. <div class="demo">
  5. <img class="" src="http://dummyimage.com/200x100" alt="">
  6. </div>
  7. <div class="demo">
  8. <img src="http://dummyimage.com/100x200" alt="">
  9. </div>
  10. <div class="demo">
  11. <img src="http://dummyimage.com/200x200" alt="">
  12. </div>
  13. <div class="demo">
  14. <img src="http://dummyimage.com/50x50" alt="">
  15. </div>

实例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

 二、水平响应式列表

实例图:

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

实例HTML:

 
 
  1. <div class="demo-wrap">
  2. <div class="demo">
  3. <div class="item item1">高120px</div>
  4. <div class="item item2">高50px</div>
  5. <div class="item item3">高140px</div>
  6. <div class="item item4">高100px</div>
  7. </div>
  8. </div>

实例CSS:

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

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

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

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

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

只是修改了容器的样式:

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

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

四、多行响应式布局

宽屏:

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

中屏:

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

窄屏:

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

HTML代码:

 
 
  1. <div class="demo-wrap">
  2. <div class="demo">
  3. <div class="item"></div>
  4. <div class="item"></div>
  5. <div class="item"></div>
  6. <div class="item"></div>
  7. <div class="item"></div>
  8. <div class="item"></div>
  9. <div class="item"></div>
  10. <div class="item"></div>
  11. </div>
  12. </div>

CSS代码:

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

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

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

演示截图:

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

HTML:

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

CSS:

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

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

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

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

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

HTML:

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

CSS:

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

demo:http://demo.qianduanblog.com/2799/6.html


原文地址:http://qianduanblog.com/post/css-learning-18-css3-flex-responsive-design-example.html