CSS flexes its muscles
Tags: css, flexbox, reactnative
Published: 2017-04-21 11:34:40

---
title: CSS flexes its muscles
published: true
description: Learning Flexbox as soon as possible will make every Web developers life easier. 
tags: css, flexbox, react-native
---

## What?

Because the Web sadly isn't on a par with native mobile applications (yet) and the use of mobile devices is outgrowing desktops, I finally had to get into the native mobile business.

Luckily 2 years ago Facebook announced [React-Native](http://facebook.github.io/react-native/) (RN), which basically lets you write JavaScript-based mobile apps, that target native UI elements instead of HTML elements.

They even [re-implemented](https://facebook.github.io/yoga/) parts of CSS for this, so Web devs can now "do apps" and not only use most of their JS and React knowledge, but also CSS which we all ~~hate~~ love so much.

So, now that I'm doing the fancy native apps, like the hipster I meant to be, I'm also forced to learn Flexbox. Why? Well, as I said, they only implemented _parts_ of CSS and not the whole thing. The part they implemented is __Flexbox__.

Back in 2003, when I started doing my first static Web pages in HTML and CSS I learned about the [Box-Model](https://wiki.selfhtml.org/wiki/CSS/Box-Modell), which is probably single-handedly the best I ever learned for doing front-end Web development.

Learning this created a visual model in my mind about all the markup and styles I wrote. Since I didn't write it _manually_ for a long time, but switched to PHP to generate it dynamically and later to JavaScript for that matter, this helped me tremendously.

But now things are changing, CSS got a new layout engine called _Flexbox_. I didn't think much about this till I was forced to use it with RN. 

I feel like 90% of the things I did with the help of CSS frameworks, like Bootstrap lately, can be done with a few lines of CSS now.

## How?

Want to justify some elements in a `<div>` with even space between them and half of that space around them?

    div {
      display: flex;
      justify-content: space-around;
    }

That's it.

The difference between RN and Web is, that RN enables it by default for the _native Elements_ and on the Web you have to enable it manually with `display: flex;`. Also the `flex-direction` has a different default. On RN the default is `column`, probably because most mobile devices are smartphones and held in portrait mode. On Web the default is `row`.

You can _order_ your elements with Flexbox too, which is pretty nice. For example when you need a box with a header and footer independent of the position of these.

    <main>
      <header>...</header>
      <footer>...</footer>
      ...
    </main> 

    main {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    main > header {
      order: -1;
    }
    main > footer {
      order: 1;
    }

The children of a Flexbox container will get `order: 0` by default, so everything added besides `<footer>` and `<header>` will be `0` and gets between them. `justify-content: space-between` spaces everything evenly, but adds no space above the header or below the footer.

## Why?

When people talk about Web development, they often laugh about people telling them "I know HTML and CSS, I'm a programmer!", because "hurr, these aren't real programming languages", which I think is bad. CSS, especially is a rather hard thing to get right and like I said, learning it from the ground up back in the days helped in my whole career as a Web developer.

Things like Flexbox, and also its brother the CSS [Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/grid), will change much about how Websites are styled and make them much more flexible. So learning it as soon as possible will make every Web developers life easier.