Skip to content

Instantly share code, notes, and snippets.

@leohmoraes
Last active November 6, 2020 12:46
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save leohmoraes/9e200350e9a4d8a406ff7488ea334dc0 to your computer and use it in GitHub Desktop.
Save leohmoraes/9e200350e9a4d8a406ff7488ea334dc0 to your computer and use it in GitHub Desktop.
flex
<h1>display: block;</h1>
<section class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</section>
<h1>display: flex;</h1>
<section class="container flex">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</section>
<h1>display: flex;</h1>
<section class="container flex">
<div class="item">Teste 1</div>
<div class="item">Teste 2</div>
<div class="item">Teste 3</div>
<div class="item">Teste 4</div>
<div class="item">Teste 5</div>
<div class="item">Teste 6</div>
<div class="item">Teste 7</div>
</section>
<h1>display: flex;</h1>
<section class="container flex flex-wrap">
<div class="item">Teste 1</div>
<div class="item">Teste 2</div>
<div class="item">Teste 3</div>
<div class="item">Teste 4</div>
<div class="item">Teste 5</div>
<div class="item">Teste 6</div>
<div class="item">Teste 7</div>
</section>
<h1>display: flex; // flex-item-1</h1>
<section class="container flex">
<div class="item flex-item-1">Teste 1</div>
<div class="item flex-item-1">Teste 2</div>
<div class="item flex-item-1">Teste 3</div>
</section>
/* Flex */
.flex {
display: flex;
}
.flex-wrap {
flex-wrap: wrap;
}
.flex-item-1 {
flex: 1;
}
/* Flex Item */
.item {
margin: 5px;
background: tomato;
text-align: center;
font-size: 1.5em;
}
.container {
max-width: 400px;
margin: 0 auto;
border: 1px solid #ccc;
}
h1 {
text-align: center;
margin: 20px 0 0 0;
font-size: 1.25em;
font-weight: normal;
}
body {
font-family: monospace;
color: #333;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment