Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Great FlexBox Resources and Awful Examples

DZone's Guide to

Great FlexBox Resources and Awful Examples

A developer shows us how to use the CSS layout engine Flexbox, and how you can use it to interact with the DOM in new and interesting ways.

· Web Dev Zone
Free Resource

Tips, tricks and tools for creating your own data-driven app, brought to you in partnership with Qlik.

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). Check out 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:

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;
}

View the result here.

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.

Explore data-driven apps with less coding and query writing, brought to you in partnership with Qlik.

Topics:
web dev ,flexbox ,css

Published at DZone with permission of Dean North. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}