Flexbox

[00:00:00]
>> So let's move on then to Flexbox and talk a little bit more specifically about what's going on in the world of Flexbox. Flexbox stands for flexible boxes and the specification was defined actually around 2008, 2009. And they were never envisioned of laying out whole web pages. This is a theme that we have in CSS, we have hacked our way through layouts for so long.

[00:00:28]
The idea here with Flexbox was that it would lay out parts of webpages that Flexbox was for UI, as opposed to entire page layouts. Flexbox is really good at vertical centering and an equal heights, and it's really easy to reorder boxes, which is a wonderful thing. But the big disadvantage with Flexbox is that it was never designed to be locked down for the layouts.

[00:00:54]
It's really a one dimensional type of layout. And it's very hard to understand exactly what I'm talking about when I say one dimensional layout, but I want you to think about rose. And if you look at web pages today, you can very much see that people are thinking about a row on the page, maybe it has some things inside of it.

[00:01:12]
Then we have another row on the page with some other things, another row on the page, more things. That is because Flexbox thinks about itself in terms of rows, as opposed to thinking of itself in two dimensions more like CSS grid. A couple of pieces of terminology that will be helpful to you the concept of the main axis, and the cross axis, the flex item, and the flex container.

[00:01:36]
I'm really not talking a lot about flex containers and flex items, flex containers are parents, flex items are children and this has to do with the HTML. And the way the HTML is put together we're gonna talk a lot, a lot, a lot about it when we start doing code.

[00:01:52]
Because whether an item is a parent or whether it's a child would determine what CSS properties are available to leverage in laying out your webpage. Flexbox of course can go in two directions, so if you happen to have the setup for columns, the main axis is the vertical axis.

[00:02:11]
But if you set your Flexbox to rows instead your main axis becomes the horizontal axis and the cross axis becomes the vertical axis. I don't hear a lot of people talking about main axis and cross axis when they talk about Flexbox they mostly talk about rows and columns.

[00:02:30]
Probably because main axis and cross axis are terms that are a little bit confusing and change with the dimensions of the webpage. So you'll hear me talk a lot about horizontal or vertical, you'll hear me talk a lot about flex containers, flex items, and parents, and children. So the three versions of Flexbox, they started way back like I said in 2009, and we had a display property the value of which was box, and that would allow us to use some Flexbox properties.

[00:03:00]
As you know browsers rolled out much more slowly back in those days and so we had older browsers that were supporting the syntax. The W3C had something happen and everybody decided to redefine everything having to do with Flexbox. So we came up with a new syntax that rolled out in 2011 the only browser that ever supported this so-called tweener syntax.

[00:03:24]
The syntax that comes in between the old and the new version, the current version that we use now. The only browser that supported that was IE 10 good times, and so in 2016 we finally had display flex. We had all the browsers that are supporting it the browser's have been supporting it now for quite a while it's a very safe type of technology to use.

[00:03:48]
Now as always, the only time you need to be concerned about this is with IE support at this moment in time, because of course IE is no longer being updated. I hope you don't have to support IE anymore, but I am aware that there are people mostly working at universities, or in government, who may still have to support that browser.

[00:04:09]
All of the other modern ones that roll out on a regular basis Safari, Firefox, Chrome, and Edge, all of them support Flexbox just fine. They're some games you might be aware of that have been out for some time. Feel free to play these, on your own Flexbox froggy and Flexbox defense, we'll focus on.

[00:04:30]
Really the syntax of how to get Flexbox to work, but it doesn't really teach you the thought behind Flexbox. And so I'm gonna spend more time on how to think about a Flexbox problem rather than on all of the various syntax, so these are games that you can play on your own.

[00:04:49]
There's a ton of properties that are available, you may want to print out some information like this I have here on slide. I think I have a separate text file that you can refer to for that or just take a look at CSS tricks. They have a great page that describes all of the properties and values for Flexbox.