Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

What the FlexBox? – A free 20 video course to learn CSS Flexbox

flexbox.io

Post reply on HN
Print view View original

61–66 of 66 posts

Re: What the FlexBox? – A free 20 video course to learn CSS Flexbox

#61

Post by deadowl »

orliesaurus wrote: post #40

proof that css is still broken in 2016

Well, I would say that vertically centering a thumbnail to the left of a block of text would certainly be easier with flex box. My previous solution would have been:

    .container { position: relative; }
    .thumbnail { position: absolute; margin: auto 0; width: w; height: h; margin: auto 0; top: 0; right: 0; bottom: 0; left: 0; }
    .summary { padding-left: w; min-height: h; }
With flexbox that becomes:

    .container { display: flex; }
    .thumbnail { align-self: center; }
There are a lot fewer traps and design is a lot more scalable in that you don't have to worry per se about width and height.

Re: What the FlexBox? – A free 20 video course to learn CSS Flexbox

#62

Post by exodust »

cloverich wrote: post #15
alexduros wrote: post #7

A good sum up to play with flexbox here : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Thats been my goto reference for most of my layout needs. I've also found https://philipwalton.github.io/solved-by-flexbox/ useful. Props to all the great authors (including OP) for these -- flexbox + great tutorials has greatly improved my web dev experience.

And don't forget http://flexboxin5.com/

(tip: visit with a computer not a phone)

Re: What the FlexBox? – A free 20 video course to learn CSS Flexbox

#63

Post by bobwaycott »

I recognize the effort put into these videos, and admire it. A few videos in, and the approach is pretty good—split flexbox into small chunks for those who learn best that way.

Sadly, the frequent mispronunciation of words quickly becomes distracting. Axis pronounced as "access", axes called "axises", i think I even heard "ek cetera". By the third video, I think I heard these mistakes at least a dozen times. That totally kills being able to listen. Perhaps it's worth redoing the voice over. As it stands, I'd rather read a text guide.

Re: What the FlexBox? – A free 20 video course to learn CSS Flexbox

#64

Post by rachelandrew »

Someone1234 wrote: post #14

Even if you know Flexbox you cannot use Flexbox because support lacks. http://caniuse.com/#feat=flexbox The TL;DR: Everyone is doing well except IE which is horribly broken. Only Microsoft's Edge browser has good Flexbox support, but nobody uses Edge, so therefore Flexbox is still no-go. Come back in five years when IE 11 is a distant memory and Edge is popular.

That isn't the case. Firstly, you need to take a look at the browser stats for the site that you are working on. It may be that in your case you have a very high percentage of old IE users, and so for you, flexbox isn't an option. Even then though, you may be surprised.

If you use flexbox as an enhancement, to get really good alignment of UI elements for example, then you can often take advantage of it to make the experience really great in newer browsers while not locking out old ones.

I would suggest taking a look at Zoe M. Gillenwater's talk. She works for Booking.com. Are they locking out old IE users? Of course not. So she demonstrates how to enhance responsiveness with flexbox. https://www.youtube.com/watch?v=_98SE8WUvLk

Re: What the FlexBox? – A free 20 video course to learn CSS Flexbox

#65

Post by rachelandrew »

Someone1234 wrote: post #14

Even if you know Flexbox you cannot use Flexbox because support lacks. http://caniuse.com/#feat=flexbox The TL;DR: Everyone is doing well except IE which is horribly broken. Only Microsoft's Edge browser has good Flexbox support, but nobody uses Edge, so therefore Flexbox is still no-go. Come back in five years when IE 11 is a distant memory and Edge is popular.

It is also worth remembering that flexbox was never designed for complete layouts. It's designed for one-dimensional layout. UI elements such as forms fields, navigation, sets of "card" etc. You run into a whole bunch of issues if you see it as the holy grail for layout, because you are using the tool for something it wasn't designed for.
Post reply on HN