Flex布局实例：流式布局

最新推荐文章于 2026-04-28 14:36:40 发布

原创最新推荐文章于 2026-04-28 14:36:40 发布 · 1.9k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

CSS 同时被 2 个专栏收录

17 篇文章

订阅专栏

前端项目

9 篇文章

订阅专栏

本文深入探讨Flex布局，通过实例展示如何利用Flex实现灵活的流式布局，适应不同屏幕尺寸，实现响应式设计。内容涵盖Flex基础概念、容器属性、项属性以及复杂数字布局解决方案。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>流式布局</title>
  <style>
    .main {
      width: 200px;
      height: 150px;
      background-color: black;
      display: flex;
      flex-flow: row wrap;
      align-content: flex-start;
    }

    .item {
      /*
      假如需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。
      这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。
       */
      box-sizing: border-box;
      background-color: white;
      height: 50px;
      border: 1px solid red;

      /*
      宽度占比25%，不伸缩
       */
      flex: 0 0 25%;
    }
  </style>
</head>
<body>
<h2>流式布局</h2>
<p>每行的项目数固定，会自动分行</p>
<div class="main">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
</body>
</html>