Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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