1
0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-31 09:31:43 +02:00

Add CSS code for layout patterns

This commit is contained in:
Phuoc Nguyen
2021-03-31 16:35:26 +07:00
parent 28998e445e
commit 9156f3a5cc
9 changed files with 165 additions and 117 deletions

View File

@@ -25,23 +25,32 @@ const Details: React.FC<{}> = () => {
</div>
<BrowserFrame
html={`
<div style="
display: flex;
flex-direction: column;
height: 100%;
">
<header style="flex-shrink: 0;">
<div class="container">
<header class="header">
...
</header>
<main style="flex-grow: 1;">
<main class="main">
...
</main>
<footer style="flex-shrink: 0;">
<footer class="footer">
...
</footer>
</div>
`}
css={``}
css={`
.container {
display: flex;
flex-direction: column;
height: 100%;
}
.header,
.footer {
flex-shrink: 0;
}
.main {
flex-grow: 1;
}
`}
>
<div
style={{