Great FlexBox resources and awful examples

FlexBox is a new CSS layout engine that has been around for years. Today there is good browser support. All modern browsers support FlexBox and even IE11 supports it (with a couple of bugs). Checkout all that glorious green on CanIUse.com

There are also loads of great resources out there. If you have been afraid to learn FlexBox then I highly recommend you give some of these a read:

• https://internetingishard.com/html-and-css/flexbox/ A good breakdown of all the features of FlexBox
• https://philipwalton.github.io/solved-by-flexbox/ Some great examples of how to put those features to good use
• https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Full guide with good diagrams to help explain the layout
• https://www.quackit.com/css/flexbox/examples/ Lots of good examples

Pseudo element ordering?!!?!?!

One of the features of FlexBox is the ability to change the order of elements using CSS. This was not possible before. An element with display:flex alows all of its children to specify an order which defaults to 0. Because the ::before and ::after selectors add elements inside the selected element but before or after its normal content, these can be ordered too! Take a look at this completely useless example below.

<div>
    <p>Paragraph 1</p>
                          <------ what if we want to add an element here with css?
    <p>Paragraph 2</p>
</div>

If we wanted to insert an element between paragraph 1 and 2 we wouldn’t be able to. The closest we could get would be to add a ::before or ::after selector to one of the p elements but that would have put the content inside the paragraph which may not be what we wanted. By setting the div to display:flex and also adding pseudo selectors to the div, we are able to inject new content between the paragraphs. We can even have the ::after content appear before the ::before content. I’m not sure why you would want to, but hey, whatever floats your boat.

Here is a basic example of how to do this…

div{
    display:flex;
    flex-direction: column;
}

div::before{
    content:'Pseudo Before';
    order: 2;
    display:block;
    margin: 1em 0;
}

div::after{
    content:'Pseudo After';
    order: -1;
    display:block;
    margin: 1em 0;
}

div>p:nth-child(1){
    order: 1;
}

div>p:nth-child(2){
    order: 3;
}

and the result…

Try inspecting that, it makes me feel dirty just looking at it…

If you find a legitimate use for this, please let us know in the comments!

FlexBox works in 3D!

FlexBox behaves nicely with the native 3D features in the browser.

Try Opening this in a new window and resizing the window. You should see the cubes space out evenly thanks to flexbox.

Here is the complex html that the above is made of.

<div>
    <p></p>
    <p></p>
    <p></p>
</div>

and the css…

html, body, p{margin:0;}
div{
    min-height: 100vh;
    display:flex;
    flex-direction: row;
    background:azure;
    justify-content: space-around;
    align-items: center;
}

p{
    background:red;
    height:100px;
    width:100px;
    flex: none;
}

/* Everything below this line is for 3D only. All the layout is handled above */

body{
    /*A high perspective to give an isometric look*/
    perspective: 300000;
}

div{
    transform: rotateX(60deg) rotateZ(-45deg);
    transform-style: preserve-3d;
}

p{
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transform: translateZ(100px);
}

/* Right */
p:after {
    background: #bf0000;
    transform: rotateX(90deg);
    transform-origin: 0px 100%;
    width: 100%;
    height: 100%;
    content: '';
    position: absolute;
}

/* Left */
p:before {
    background: #ff5353;
    transform: rotateY(90deg);
    transform-origin: 0px 0px;
    width: 100%;
    height: 100%;
    content: '';
    position: absolute;
}

Summary

FlexBox is mature enough to use and offers some great features that make your life much easier and even allow for scenarios that were not possible before.

We suggest that if you don’t already know how to Flex a Box, that you learn immediately!

Let us know of any other cool FlexBox features or resources that others may find helpful in the comments below.