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. 
  
  
  2. 
<img src="http://dummyimage.com/100x100" alt="">

    3. 
  
  
  3. </div>
    4. 
  
  
  4.  
    5. 
  
  
  5. 
<div class="demo">

    6. 
  
  
  6. 
<img class="" src="http://dummyimage.com/200x100" alt="">

    7. 
  
  
  7. </div>
    8. 
  
  
  8.  
    9. 
  
  
  9. 
<div class="demo">

    10. 
  
  
  10. 
<img src="http://dummyimage.com/100x200" alt="">

    11. 
  
  
  11. </div>
    12. 
  
  
  12.  
    13. 
  
  
  13. 
<div class="demo">

    14. 
  
  
  14. 
<img src="http://dummyimage.com/200x200" alt="">

    15. 
  
  
  15. </div>
    16. 
  
  
  16.  
    17. 
  
  
  17. 
<div class="demo">

    18. 
  
  
  18. 
<img src="http://dummyimage.com/50x50" alt="">

    19. 
  
  
  19. </div>
    20.

实例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. 
  
  
  2. 
<div class="demo">

    3. 
  
  
  3. 
<div class="item item1">高120px</div>

    4. 
  
  
  4. 
<div class="item item2">高50px</div>

    5. 
  
  
  5. 
<div class="item item3">高140px</div>

    6. 
  
  
  6. 
<div class="item item4">高100px</div>

    7. 
  
  
  7. 
</div>

    8. 
  
  
  8. </div>
    9.

实例CSS：

 
 
    

  1. 
.demo-wrap{

    2. 
  
  
  2. 
border: 2px solid #ddd;

    3. 
  
  
  3. 
background: #f5f5f5;

    4. 
  
  
  4. 
padding: 6px;

    5. 
  
  
  5. }
    6. 
  
  
  6.  
    7. 
  
  
  7. 
.demo{

    8. 
  
  
  8. 
width: 100%;

    9. 
  
  
  9.  
    10. 
  
  
  10. 
/*flex布局（作用于容器）*/

    11. 
  
  
  11. 
display: flex;

    12. 
  
  
  12.  
    13. 
  
  
  13. 
/*两端对齐（作用于容器）*/

    14. 
  
  
  14. 
justify-content: space-between;

    15. 
  
  
  15. }
    16. 
  
  
  16.  
    17. 
  
  
  17. 
.demo .item{

    18. 
  
  
  18. 
width: 100px;

    19. 
  
  
  19. 
background: #ffd;

    20. 
  
  
  20. 
color: #C90000;

    21. 
  
  
  21. 
font-size: 20px;

    22. 
  
  
  22. 
text-align: center;

    23. 
  
  
  23. 
line-height: 50px;

    24. 
  
  
  24. }
    25. 
  
  
  25.  
    26. 
  
  
  26. 
.demo .item1{

    27. 
  
  
  27. 
height: 120px;

    28. 
  
  
  28. }
    29. 
  
  
  29.  
    30. 
  
  
  30. 
.demo .item2{

    31. 
  
  
  31. 
height: 50px;

    32. 
  
  
  32. }
    33. 
  
  
  33.  
    34. 
  
  
  34. 
.demo .item3{

    35. 
  
  
  35. 
height: 140px;

    36. 
  
  
  36. }
    37. 
  
  
  37.  
    38. 
  
  
  38. 
.demo .item4{

    39. 
  
  
  39. 
height: 100px;

    40. 
  
  
  40. }
    41.

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

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

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

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

只是修改了容器的样式：

 
 
    

  1. 
.demo{

    2. 
  
  
  2. 
width: 100%;

    3. 
  
  
  3.  
    4. 
  
  
  4. 
/*flex布局（作用于容器）*/

    5. 
  
  
  5. 
display: flex;

    6. 
  
  
  6.  
    7. 
  
  
  7. 
/*两端对齐（作用于容器）*/

    8. 
  
  
  8. 
justify-content: space-around;

    9. 
  
  
  9.  
    10. 
  
  
  10. 
/*侧轴方向对齐方式（作用于容器）*/

    11. 
  
  
  11. 
align-items: flex-end;

    12. 
  
  
  12. }
    13.

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

四、多行响应式布局

宽屏：

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

中屏：

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

窄屏：

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

HTML代码：

 
 
    

  1. 
<div class="demo-wrap">

    2. 
  
  
  2. 
<div class="demo">

    3. 
  
  
  3. 
<div class="item"></div>

    4. 
  
  
  4. 
<div class="item"></div>

    5. 
  
  
  5. 
<div class="item"></div>

    6. 
  
  
  6. 
<div class="item"></div>

    7. 
  
  
  7. 
<div class="item"></div>

    8. 
  
  
  8. 
<div class="item"></div>

    9. 
  
  
  9. 
<div class="item"></div>

    10. 
  
  
  10. 
<div class="item"></div>

    11. 
  
  
  11. 
</div>

    12. 
  
  
  12. </div>
    13.

CSS代码：

 
 
    

  1. 
.demo-wrap{

    2. 
  
  
  2. 
border: 2px solid #ddd;

    3. 
  
  
  3. 
background: #f5f5f5;

    4. 
  
  
  4. 
padding: 6px;

    5. 
  
  
  5. }
    6. 
  
  
  6.  
    7. 
  
  
  7. 
.demo{

    8. 
  
  
  8. 
width: 100%;

    9. 
  
  
  9.  
    10. 
  
  
  10. 
/*flex布局（作用于容器）*/

    11. 
  
  
  11. 
display: flex;

    12. 
  
  
  12.  
    13. 
  
  
  13. 
/*两端对齐（作用于容器）*/

    14. 
  
  
  14. 
justify-content: space-around;

    15. 
  
  
  15.  
    16. 
  
  
  16. 
/*侧轴方向对齐方式（作用于容器）*/

    17. 
  
  
  17. 
align-items: flex-end;

    18. 
  
  
  18.  
    19. 
  
  
  19. 
/*换行（作用于容器）*/

    20. 
  
  
  20. 
flex-wrap: wrap;

    21. 
  
  
  21. }
    22. 
  
  
  22.  
    23. 
  
  
  23. 
.demo .item{

    24. 
  
  
  24. 
width: 300px;

    25. 
  
  
  25. 
height: 50px;

    26. 
  
  
  26. 
background: #444;

    27. 
  
  
  27. 
margin-bottom: 20px;

    28. 
  
  
  28. }
    29.

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

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

演示截图：

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

HTML：

 
 
    

  1. 
<div class="demo">

    2. 
  
  
  2. 
<div class="left">左边固定宽度为100px，这里设置了高度为auto</div>

    3. 
  
  
  3. 
<div class="right">右边宽度自适应，并且左右两个区域是等高的，这里设置了高度为200px</div>

    4. 
  
  
  4. </div>
    5.

CSS：

 
 
    

  1. 
.demo{

    2. 
  
  
  2. 
/*flex布局（作用于容器）*/

    3. 
  
  
  3. 
display: flex;

    4. 
  
  
  4.  
    5. 
  
  
  5. 
/*项目拉伸对齐，也就是所左边的高度为拉伸到和右边等高，默认是拉伸的*/

    6. 
  
  
  6. 
/*align-items: stretch;*/

    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 .right{

    24. 
  
  
  24. 
margin-left: 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.

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

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

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

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

HTML：

 
 
    

  1. 
<div class="demo">

    2. 
  
  
  2. 
<div class="left">左边固定宽度为100px，这里设置了高度为auto</div>

    3. 
  
  
  3. 
<div class="center">中间宽度自适应，并且左中右两个区域是等高的，这里设置了高度为200px</div>

    4. 
  
  
  4. 
<div class="right">右边固定宽度为150px，这里设置了高度为auto</div>

    5. 
  
  
  5. </div>
    6.

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

标签：

相关文章