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>

CSS3: Flex-wrap in reverse

This entry is part 12 of 13 in the series CSS3

You might be surprised.  We can actually reverse the the flex-items.

<!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: 260px;
            background-color: gray;
            -webkit-flex-wrap: wrap-reverse;
            flex-wrap: wrap-reverse;
        }

        #flex-item {
            background-color: Silver;
            width: 100px;
            height: 100px;
            margin: 10px;
        }
    </style>
</head>
<body>
<div id='flex-container'>
    <div id='flex-item'>I am a content block A</div>
    <div id='flex-item'>I am a content block B</div>
    <div id='flex-item'>I am a content block C</div>
    <div id='flex-item'>I am a content block D</div>
    <div id='flex-item'>I am a content block E</div>
    <div id='flex-item'>I am a content block F</div>
</div>
</body>
</html>

CSS3: Putting an order to a flex box

This entry is part 13 of 13 in the series CSS3

If we want a particular flex box to be in the first order, we could use order:-1.

For example, in the example below, block D will be display as the first box.

<!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: 260px;
            background-color: gray;
            -webkit-flex-wrap: wrap;
            -moz-flex-wrap: wrap;
            flex-wrap: wrap;
        }

        .flex-item {
            background-color: Silver;
            width: 100px;
            height: 100px;
            margin: 10px;
        }

        .point0 {
            -webkit-order: -1;
            order: -1;
        }
    </style>
</head>
<body>
<div class='flex-container'>
    <div class='flex-item'>I am a content block A</div>
    <div class='flex-item'>I am a content block B</div>
    <div class='flex-item'>I am a content block C</div>
    <div class='flex-item point0'>I am a content block D</div>
    <div class='flex-item'>I am a content block E</div>
    <div class='flex-item'>I am a content block F</div>
</div>
</body>
</html>