Created
December 6, 2019 23:12
-
-
Save diegograssato/04b5db225284e270c026d37b80b1f244 to your computer and use it in GitHub Desktop.
card with flex
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<style> | |
body { | |
font-family: Arial, Helvetica, sans-serif; | |
} | |
.flex { | |
display: flex; | |
} | |
.column { | |
flex-flow: column nowrap; | |
flex-grow: 1; | |
} | |
/* Flex Item */ | |
.item { | |
padding: 16px; | |
background: tomato; | |
text-align: center; | |
font-size: 1.5em; | |
flex: 1; | |
margin: 1px; | |
} | |
.container { | |
max-width: 100%; | |
margin: 0 auto; | |
border: 1px solid #ccc; | |
} | |
/* Style the counter cards */ | |
.card { | |
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); | |
padding: 16px; | |
text-align: center; | |
background-color: #f1f1f1; | |
} | |
</style> | |
</head> | |
<body> | |
<h1>display: flex;</h1> | |
<div class="container card flex"> | |
<div class="column"> | |
<div class="item"> | |
assa | |
</div> | |
</div> | |
<div class="column"> | |
<div class="item">1</div> | |
<div class="item">2</div> | |
</div> | |
<div class="column"> | |
<div class="item">1</div> | |
</div> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment