CSS3: Flex-wrap

This entry is part 11 of 13 in the series CSS3

At times, there are too many Flex Items and you can wrap the items along the main axis.

flex-wrap: wrap
<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Flexbox</title>
    <style>
        #flex-container {
            display: -webkit-flex;
            display: flex;
            width: 400px;
            height: 250px;
            background-color: gray;
            -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
        }

        #flex-item {
            background-color: Silver;
            width: 100px;
            height: 100px;
            margin: 2px;
        }
    </style>
</head>
<body>
<div id='flex-container'>
    <div id='flex-item'>I am a content block</div>
    <div id='flex-item'><img src='//codecrawl.com/code/images/ushuaia.jpg' width='100px' height='100px'/></div>
    <div id='flex-item'><img src='//codecrawl.com/code/images/ushuaia.jpg' width='100px' height='100px'/></div>
    <div id='flex-item'><img src='//codecrawl.com/code/images/ushuaia.jpg' width='100px' height='100px'/></div>
    <div id='flex-item'><img src='//codecrawl.com/code/images/ushuaia.jpg' width='100px' height='100px'/></div>
</div>
</body>
</html>
Series Navigation<< CSS3: Align flex-items along cross axis
CSS3: Flex-wrap in reverse >>