参考手册
CSS Flexbox
CSS Flex Item
返回 CSS Flexbox

CSS3 自适应的Flex

响应式的Flexbox

您从CSS媒体查询一章中了解到，可以使用媒体查询为不同的屏幕大小和设备创建不同的布局。

笔记本或台式电脑:

1
2
3

移动设备:

1
2
3

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. * {
  6.   box-sizing: border-box;
  7. }
  9. .flex-container {
  10.   display: flex;
  11.   flex-direction: row;
  12.   font-size: 30px;
  13.   text-align: center;
  14. }
  16. .flex-item-left {
  17.   background-color: #f1f1f1;
  18.   padding: 10px;
  19.   flex: 50%;
  20. }
  22. .flex-item-right {
  23.   background-color: dodgerblue;
  24.   padding: 10px;
  25.   flex: 50%;
  26. }
  28. /* Responsive layout - makes a one column-layout instead of two-column layout */
  29. @media (max-width: 800px) {
  30.   .flex-container {
  31.     flex-direction: column;
  32.   }
  33. }
  34. </style>
  35. </head>
  36. <body>
  38. <h1>响应式的Flexbox</h1>
  40. <p>"flex-direction: row;" 水平（从左到右）堆叠 flex 项。</p>
  41. <p>"flex-direction: column;" 垂直（从上到下）堆叠 flex 项。</p>
  42. <p><b>调整浏览器窗口的大小，以查看屏幕尺寸为800px或更小。</b></p>
  44. <div class="flex-container">
  45.   <div class="flex-item-left">1</div>
  46.   <div class="flex-item-right">2</div>
  47. </div>
  49. </body>
  50. </html>
运行一下

使用 Flexbox 的响应式图库

使用 flexbox 创建响应式图像库，该图像库根据屏幕大小在四幅、两幅或全宽图像之间变化：

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <style>
  4. * {
  5.   box-sizing: border-box;
  6. }
  8. body {
  9.   margin: 0;
  10.   font-family: Arial;
  11. }
  13. .header {
  14.   text-align: center;
  15.   padding: 32px;
  16. }
  18. .row {
  19.   display: flex;
  20.   flex-wrap: wrap;
  21.   padding: 0 4px;
  22. }
  24. /* Create four equal columns that sits next to each other */
  25. .column {
  26.   flex: 25%;
  27.   max-width: 25%;
  28.   padding: 0 4px;
  29. }
  31. .column img {
  32.   margin-top: 8px;
  33.   vertical-align: middle;
  34. }
  36. /* Responsive layout - makes a two column-layout instead of four columns */
  37. @media screen and (max-width: 800px) {
  38.   .column {
  39.     flex: 50%;
  40.     max-width: 50%;
  41.   }
  42. }
  44. /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
  45. @media screen and (max-width: 600px) {
  46.   .column {
  47.     flex: 100%;
  48.     max-width: 100%;
  49.   }
  50. }
  51. </style>
  52. <body>
  54. <!-- Header -->
  55. <div class="header">
  56.   <h2>响应式图片画廊</h2>
  57.   <p>调整浏览器窗口的大小以查看响应效果。</p>
  58. </div>
  60. <!-- Photo Grid -->
  61. <div class="row">
  62.   <div class="column">
  63.     <img src="/images/wedding.jpg" style="width:100%">
  64.     <img src="/images/rocks.jpg" style="width:100%">
  65.     <img src="/images/falls2.jpg" style="width:100%">
  66.     <img src="/images/paris.jpg" style="width:100%">
  67.     <img src="/images/nature.jpg" style="width:100%">
  68.     <img src="/images/mist.jpg" style="width:100%">
  69.     <img src="/images/paris.jpg" style="width:100%">
  70.   </div>
  72.   <div class="column">
  73.     <img src="/images/underwater.jpg" style="width:100%">
  74.     <img src="/images/ocean.jpg" style="width:100%">
  75.     <img src="/images/wedding.jpg" style="width:100%">
  76.     <img src="/images/mountainskies.jpg" style="width:100%">
  77.     <img src="/images/rocks.jpg" style="width:100%">
  78.     <img src="/images/underwater.jpg" style="width:100%">
  79.   </div>
  81.   <div class="column">
  82.     <img src="/images/wedding.jpg" style="width:100%">
  83.     <img src="/images/rocks.jpg" style="width:100%">
  84.     <img src="/images/falls2.jpg" style="width:100%">
  85.     <img src="/images/paris.jpg" style="width:100%">
  86.     <img src="/images/nature.jpg" style="width:100%">
  87.     <img src="/images/mist.jpg" style="width:100%">
  88.     <img src="/images/paris.jpg" style="width:100%">
  89.   </div>
  91.   <div class="column">
  92.     <img src="/images/underwater.jpg" style="width:100%">
  93.     <img src="/images/ocean.jpg" style="width:100%">
  94.     <img src="/images/wedding.jpg" style="width:100%">
  95.     <img src="/images/mountainskies.jpg" style="width:100%">
  96.     <img src="/images/rocks.jpg" style="width:100%">
  97.     <img src="/images/underwater.jpg" style="width:100%">
  98.   </div>
  99. </div>
  101. </body>
  102. </html>
运行一下

使用 Flexbox 的响应式网站

使用 flexbox 创建响应式网站，其中包含弹性导航栏和弹性内容：

代码如下：

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1">
  5. <style>
  6. * {
  7.   box-sizing: border-box;
  8. }
  10. /* Style the body */
  11. body {
  12.   font-family: Arial;
  13.   margin: 0;
  14. }
  16. /* Header/logo Title */
  17. .header {
  18.   padding: 60px;
  19.   text-align: center;
  20.   background: #1abc9c;
  21.   color: white;
  22. }
  24. /* Style the top navigation bar */
  25. .navbar {
  26.   display: -ms-flexbox; /* IE10 */
  27.   display: flex;
  28.   background-color: #333;
  29. }
  31. /* Style the navigation bar links */
  32. .navbar a {
  33.   color: white;
  34.   padding: 14px 20px;
  35.   text-decoration: none;
  36.   text-align: center;
  37. }
  39. /* Change color on hover */
  40. .navbar a:hover {
  41.   background-color: #ddd;
  42.   color: black;
  43. }
  45. /* Column container */
  46. .row {
  47.   display: -ms-flexbox; /* IE10 */
  48.   display: flex;
  49.   -ms-flex-wrap: wrap; /* IE10 */
  50.   flex-wrap: wrap;
  51. }
  53. /* Create two unequal columns that sits next to each other */
  54. /* Sidebar/left column */
  55. .side {
  56.   -ms-flex: 30%; /* IE10 */
  57.   flex: 30%;
  58.   background-color: #f1f1f1;
  59.   padding: 20px;
  60. }
  62. /* Main column */
  63. .main {
  64.   -ms-flex: 70%; /* IE10 */
  65.   flex: 70%;
  66.   background-color: white;
  67.   padding: 20px;
  68. }
  70. /* Fake image, just for this example */
  71. .fakeimg {
  72.   background-color: #aaa;
  73.   width: 100%;
  74.   padding: 20px;
  75. }
  77. /* Footer */
  78. .footer {
  79.   padding: 20px;
  80.   text-align: center;
  81.   background: #ddd;
  82. }
  84. /* 响应式布局-当屏幕宽度小于700px时，使两列堆叠在一起，而不是相邻 */
  85. @media screen and (max-width: 700px) {
  86.   .row, .navbar {
  87.     flex-direction: column;
  88.   }
  89. }
  90. </style>
  91. </head>
  92. <body>
  94. <!-- Header -->
  95. <div class="header">
  96.   <h2>我的网站</h2>
  97.   <p>使用了弹性布局。</p>
  98. </div>
  100. <!-- Navigation Bar -->
  101. <div class="navbar">
  102.   <a href="#">链接</a>
  103.   <a href="#">链接</a>
  104.   <a href="#">链接</a>
  105.   <a href="#">链接</a>
  106. </div>
  108. <!-- The flexible grid (content) -->
  109. <div class="row">
  110.   <div class="side">
  111.     <h2>关于我</h2>
  112.     <h5>我的照片：</h5>
  113.     <div class="fakeimg" style="height:200px;">图片</div>
  114.     <p>关于我的一些文本...</p>
  115.     <h3>更多文本</h3>
  116.     <p>文本文本文本文本...</p>
  117.     <div class="fakeimg" style="height:60px;">图片</div><br>
  118.     <div class="fakeimg" style="height:60px;">图片</div><br>
  119.     <div class="fakeimg" style="height:60px;">图片</div>
  120.   </div>
  121.   <div class="main">
  122.     <h2>标题</h2>
  123.     <h5>标题描述，2021 年 7 月 7 日</h5>
  124.     <div class="fakeimg" style="height:200px;">Image</div>
  125.     <p>一些文本...</p>
  126.     <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本...</p>
  127.     <br>
  128.     <h2>TITLE HEADING</h2>
  129.     <h5>标题描述，2021 年 107月 7 日</h5>
  130.     <div class="fakeimg" style="height:200px;">图片</div>
  131.     <p>一些文本...</p>
  132.     <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本...</p>
  133.   </div>
  134. </div>
  136. <!-- Footer -->
  137. <div class="footer">
  138.   <h2>页脚</h2>
  139. </div>
  141. </body>
  142. </html>
运行一下
CSS Flex Item

分类导航