mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-16 19:14:08 +02:00
Code Issues Releases Wiki Activity

Add CSS code for layout patterns

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

36
client/patterns/same-height-columns/Details.tsx
View File

@@ -22,25 +22,14 @@ const Details: React.FC<{}> = () => {
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<div style="display: flex;">
<div class="container">
<!-- Column -->
<div style="
flex: 1;
/* Space between columns */
margin: 0 8px;
/* Layout each column */
display: flex;
flex-direction: column;
">
<div class="column">
<!-- Cover -->
...
<!-- Content -->
<div style="
/* Take available height */
flex: 1;
">
<div class="content">
...
</div>
@@ -52,7 +41,24 @@ html={`
...
</div>
`}
css={``}
css={`
.container {
display: flex;
}
.column {
flex: 1;
/* Space between columns */
margin: 0 8px;
/* Layout each column */
display: flex;
flex-direction: column;
}
.content {
/* Take available height */
flex: 1;
}
`}
>
<div
style={{