Solved by Flexbox • Hacker News Board

Re: Solved by Flexbox

#21

Post by bontoJR » Fri, May 22, 2015, 12:56 PM UTC

philipwalton wrote: post #18

Solved by Flexbox creator here. I wanted to add that if you're using flexbox today, you should also check out this other repo of mine: https://github.com/philipwalton/flexbugs A community-curated list of flexbox issues and cross-browser workarounds for them.

Very smart, it's nice to see you are inviting people to submit workarounds and descriptions of problems in different browser, instead of just asking for bug reports.

This makes feel the project more interesting, because if I hit one of the already covered problems, I already know where I can (probably) find the solution.

Re: Solved by Flexbox

#22

Post by Eric_WVGG » Fri, May 22, 2015, 1:06 PM UTC

scotu wrote: post #12

kagamine wrote: post #7

Earlier quoted context omitted.

As another user says, no js. Pure CSS runs in the browser without a get request (other than the CSS file you are already using, obv.) so it eliminates the need for a grid system like Bootstrap, 960gs etc. The 'grid' is there in the CSS and html where it is meant to be, without the need for @media queries with 10 decimal points and 15 font sizes. It also provides more layout options than currently exist without the ne…

I'd like to read more about flexbox, any link you'd recommend? Especially backwards compatibility and the cross browser/mobile you are mentioning are something I'm interested in. Thanks

https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-p...

Re: Solved by Flexbox

#23

Post by ashazar » Fri, May 22, 2015, 1:06 PM UTC

A very nice realtime flexbox simulation. http://flexboxin5.com/

Re: Solved by Flexbox

#24

Post by pandatigox » Fri, May 22, 2015, 1:10 PM UTC

Thank you, thank you a million times.

I've recently looked into flexbox for a project I started, but all the examples and stuff out there seem very ambiguous (compared to the amount of time I'm willing to invest. I just want things TO WORK). But looking at those docs again with this will help my understanding heaps.

Re: Solved by Flexbox

#25

Post by escherize » Fri, May 22, 2015, 1:10 PM UTC

Here's a highly interactive flexbox demo, done using re-com, a Clojurescript library that uses react.

http://re-demo.s3-website-ap-southeast-2.amazonaws.com/#/h-b...

Definitely try out the Show me: on the bottom. Also try checking out the checkboxes in the gray box, as well as changing the values.

Re: Solved by Flexbox

#26

Post by emehrkay » Fri, May 22, 2015, 1:14 PM UTC

Thank you for this. I was just wondering how I should approach a full-height column next to a center-aligned image (http://images.apple.com/osx/photos/images/powerful_editing_t...). Flexbox seems to be the answer

Re: Solved by Flexbox

#27

Post by lazyant » Fri, May 22, 2015, 1:18 PM UTC

Sorry for my laziness, how does this compare to Bootstrap?

Re: Solved by Flexbox

#28

Post by bronlund » Fri, May 22, 2015, 1:29 PM UTC

It's worth mentioning that the flexbox standard has gone through three major revisions, each with very different syntax. To extend the usefulness somewhat to older browsers it's possible to mix the different versions.

See this article at CSS-Tricks for some examples https://css-tricks.com/using-flexbox/

Re: Solved by Flexbox

#29

Post by jsalinas » Fri, May 22, 2015, 1:36 PM UTC

lazyant wrote: post #27

Sorry for my laziness, how does this compare to Bootstrap?

Bootstrap is a CSS framework and the flexbox layout is a CSS module, so you can't really compare them.

Re: Solved by Flexbox

#30

Post by marcuskaz » Fri, May 22, 2015, 1:43 PM UTC

spacer.gif