CSS flexes its muscles

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 (RN), which basically lets you write JavaScript-based mobile apps, that target native UI elements instead of HTML elements.

They even re-implemented 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, 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, 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.