Skip to content

Instantly share code, notes, and snippets.

@teethnclaws
Created March 5, 2019 02:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save teethnclaws/860a53eb26b2bd81c4891640093b4fc3 to your computer and use it in GitHub Desktop.
Save teethnclaws/860a53eb26b2bd81c4891640093b4fc3 to your computer and use it in GitHub Desktop.
JS Bin flex-wrap start // source https://jsbin.com/tocuhaw
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="flex-wrap start">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
.container{
display: flex;
/* again we could assign inline-flex or flex */
}
/* the default value for flex-wrap is nowrap; which
means we won't see anything change if we were to apply
it. See example of container .one */
.one{
flex-wrap: nowrap;
}
/* now we see the items in container .two are
wrapping to fill the space available, and are
sizing to their original size instead of shrinking to
fit. */
.two{
flex-wrap: wrap;
}
/* as you can see the items within .three have reversed
their order, but again, akin to .two are able to
keep their intended size and are wrapping to fill the
available lines */
.three{
flex-wrap: wrap-reverse;
}
/* below is basic styling*/
.container{
border: 4px solid #61585E;
margin-bottom: 10px;
}
.container > *{
background-color: #EA3556;
padding: 5px;
color: white;
width: 80px;
height: 60px;
}
.container > *:nth-child(even){
background-color: #49AEC0;
}
</style>
</head>
<body>
<!-- BEGIN LESSON CODE -->
<div class="container one">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="container two">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
<div class="container three">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
<!-- END LESSON CODE -->
<script id="jsbin-source-css" type="text/css">.container{
display: flex;
/* again we could assign inline-flex or flex */
}
/* the default value for flex-wrap is nowrap; which
means we won't see anything change if we were to apply
it. See example of container .one */
.one{
flex-wrap: nowrap;
}
/* now we see the items in container .two are
wrapping to fill the space available, and are
sizing to their original size instead of shrinking to
fit. */
.two{
flex-wrap: wrap;
}
/* as you can see the items within .three have reversed
their order, but again, akin to .two are able to
keep their intended size and are wrapping to fill the
available lines */
.three{
flex-wrap: wrap-reverse;
}
/* below is basic styling*/
.container{
border: 4px solid #61585E;
margin-bottom: 10px;
}
.container > *{
background-color: #EA3556;
padding: 5px;
color: white;
width: 80px;
height: 60px;
}
.container > *:nth-child(even){
background-color: #49AEC0;
}</script>
</body>
</html>
.container{
display: flex;
/* again we could assign inline-flex or flex */
}
/* the default value for flex-wrap is nowrap; which
means we won't see anything change if we were to apply
it. See example of container .one */
.one{
flex-wrap: nowrap;
}
/* now we see the items in container .two are
wrapping to fill the space available, and are
sizing to their original size instead of shrinking to
fit. */
.two{
flex-wrap: wrap;
}
/* as you can see the items within .three have reversed
their order, but again, akin to .two are able to
keep their intended size and are wrapping to fill the
available lines */
.three{
flex-wrap: wrap-reverse;
}
/* below is basic styling*/
.container{
border: 4px solid #61585E;
margin-bottom: 10px;
}
.container > *{
background-color: #EA3556;
padding: 5px;
color: white;
width: 80px;
height: 60px;
}
.container > *:nth-child(even){
background-color: #49AEC0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment