CSS Flexbox: flex-wrap

CSS flex-wrap is usually used to wrap the content into multiple lines, so the user no need to scroll to see the hidden content.

Let’s take this as an example, we created three boxes with min-width is equal to 200px. The container has the max-width is 900px.

index.html

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="red box"></div>
<div class="blue box"></div>
<div class="orange box"></div>
</div>
</body>
</html>

styles.css

.container{

background-color: beige;
max-width: 900px;
margin: auto;
display: flex;
}
.box{
height: 100px;
min-width: 200px;
}
.red{
background-color: red;
}
.blue{
background-color: blue;
}
.orange{
background-color: orange;
}

#css3 #web-development #react #flexbox #css #css flexbox

medium.com

CSS Flexbox: flex-wrap