Skip to content

Instantly share code, notes, and snippets.

@fahdi

fahdi/css-flexbox-2.html

Created August 29, 2022 10:38
Show Gist options
  • Save fahdi/cdeabf0de0405965abdf4a552c6413de to your computer and use it in GitHub Desktop.
Save fahdi/cdeabf0de0405965abdf4a552c6413de to your computer and use it in GitHub Desktop.
Download ZIP
Raw
css-flexbox-2.html
<html>
<head>
<title>
Hello Silted - This is Flexbox
</title>
<style type="text/css">
.container {
display: flex; /* or inline-flex */
flex-direction: row;
height: 800px;
flex-wrap: wrap;
row-gap: 50px;
column-gap: 50px;
}
.container .flex-item {
padding: 20px;
border: 1px dotted;
height: 100px;
width: 20%;
margin: auto;
background-color: beige;
}
</style>
</head>
<body id="formatting-doc">
<div class="container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
<div class="flex-item">8</div>
<div class="flex-item">9</div>
<div class="flex-item">10</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment