CSS3 flow 布局是指根據元素的文檔流位置而不是固定位置來布局頁面的一種方式。它可以幫助我們輕松地創建響應式網站，而不必擔心不同屏幕尺寸的兼容性問題。

下面是一個簡單的 CSS3 flow 布局的例子：

Header
Content
Sidebar
Footer
.wrapper {
display: flow-root;
}
.header, .content, .sidebar, .footer {
break-before: avoid;
break-after: avoid;
margin: 10px;
}
.header {
background-color: #eee;
}
.content {
background-color: #fff;
}
.sidebar {
background-color: #ddd;
float: right;
}
.footer {
background-color: #eee;
clear: both;
}

在這個例子中，我們使用了 flow-root 屬性來創建一個包含所有頁面元素的根容器。然后，我們使用 break-before 和 break-after 屬性來確保我們的頁面元素不會被分割。我們還為每個元素添加了邊距，以分隔它們。

通過設置 .sidebar 元素的浮動屬性，我們可以將它放在頁面的右側。然后，我們使用 clear: both 屬性來確保在 .footer 元素之前清除所有的浮動。

CSS3 flow 布局可以幫助我們更輕松地創建靈活的布局，并減少處理浮動和清除的復雜度。更多 CSS3 flow 布局的實例和屬性請查看相關文檔。