CSS Flexbox

[00:00:00]
>> Sarah Drasner: There are guides for both flexbox and grid on CSS-Tricks site. The guide to flexbox was done by Chris Coyer and the guide to grid was done by Chris House, I believe. And they're both up on the site. It's not just me plugging the site that I work for, it's literally the most viewed page maybe on the Internet.

[00:00:22]
Here it says, you keep visiting this page, commit this to memory for God's sake, Sarah. [LAUGH] Cuz if you visit a few times, it says things to you. Basically, I have access-
>> Speaker 2: That too.
>> Sarah Drasner: What's that?
>> Speaker 2: Mine says that too.
>> Sarah Drasner: Yours says that, too, okay.

[00:00:38]
I have access to the analytics on CSS-Tricks site. It's always the most viewed page over our home page. There's always a million people on our site, and they're always on the flexbox page. I don't even know if sites would be built if that page, like the way that we know the site is down is because people are like, wait, I need that page.

[00:01:00]
It's a really well done guide, the guide to flexbox. So, I mentioned that there's ways to make diagonals and then circles, then I was really super hand wavy about it. So let's talk about some of those things really quick. I made this site, Web Animation Workshops, and I used some of these things.

[00:01:21]
So, let's see. So, you can see we have some diagonals in the layout that kinda go all the way down the site here. And then you can see that there's a couple of images of us and then there's kind of cut out thing that we did with the text.

[00:01:41]
And if you open up the browser, what I used for this was this thing called shape-outside. So, it's actually a CSS property called shape-outside, and you can create circles, and you can say something like 70%.
>> Sarah Drasner: 60%, it's too big, actually. Let me go down, 30% would be too small.

[00:02:13]
You can kinda see it getting bigger and smaller. Do you see that as I change the circle? Let me refresh the page so that it goes back to normal. This isn't supported in Firefox or Edge, that's okay. I just used an app support and said, if you don't have this, turn it into a square.

[00:02:34]
It actually does progressive enhancement really nicely, because it just looks like normal. [LAUGH] Then it's just two images, and the text goes around them, and it's that's also fine. So it kinda breaks really nicely as well. It does show up in Chrome and Safari. And then someday when it's supported, it will probably just appear and show up working.

[00:02:57]
This is just an image with border radius, right? These is just like border radius 50%, and we wrapped that content.