CSS flex-wrap Property - Playground Example

« Back to CSS flex-wrap Property

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.container {
   display: -webkit-flex;
   display: flex; 
   -webkit-flex-wrap: nowrap; 
   flex-wrap: nowrap; 
}
.container2 {
   display: -webkit-flex; 
   display: flex;
   -webkit-flex-wrap: wrap; 
   flex-wrap: wrap; 
} 
.container3 {
   display: -webkit-flex;
   display: flex; 
   -webkit-flex-wrap: wrap-reverse;
   flex-wrap: wrap-reverse;
} 
div > div {
   width: 40%;
   height: 25px;
   border: 1px solid orange;
   background: white;
} 
</style>
</head>
<body>
<h3>flex-wrap:nowrap;</h3>
<div class="container"><div>A</div><div>B</div><div>C</div></div>
<h3>flex-wrap:wrap;</h3>
<div class="container2"><div>A</div><div>B</div><div>C</div></div>
<h3>flex-wrap:wrap-reverse;</h3>
<div class="container3"><div>A</div><div>B</div><div>C</div></div>
</body>
</html>

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee