
Designing the Flexbox Inspector - lainon
https://hacks.mozilla.org/2019/01/designing-the-flexbox-inspector/
======
projproj
I created this site to help me better understand flexbox: flexbox.help. Also
did grids.help for CSS grids.

~~~
skeoh
Great tool. Very simple and straightforward. Well done!

------
nvahalik
Man. Flexbox is one of those things that makes me excited to do front end
stuff again. And I love that Mozilla is making better and better tools.

~~~
unicornporn
Have a look at CSS grids and get prepared to drop your jaw.

[https://developer.mozilla.org/en-
US/docs/Web/CSS/CSS_Grid_La...](https://developer.mozilla.org/en-
US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)

~~~
chrismorgan
In practice, almost everything that you ever want to achieve with Grid can be
achieved with Flexbox. Time and time again, I’ve encountered examples of “what
Grid enables”, and been able to replicate it precisely with Flexbox.

Not always—there are definitely practical things you can achieve with Grid
that you can’t with previous layout options, I’ve made a couple myself—but
almost always.

~~~
exogen
Interesting, having used them both a lot I feel exactly the opposite way – I
think grid's capabilities apply to more situations and suspect it will be the
go-to layout/alignment tool once it catches on more. Grid is the more powerful
tool, I think the only feature it can't do that flexbox does is making wrapped
items not line up (since grid, of course, wants to make them line up into a
grid). Wanting items not to line up seems less common, doesn't it?

~~~
chrismorgan
Flex is about single-dimensional layout, grid is about two-dimensional layout.

Most layout scenarios that are in two dimensions can actually be solved with
nested single-dimensional layout. Sometimes it’ll be easier to solve them with
a proper two-dimensional layout, and I tend to prefer the markup that Grid
lets me have, but I find two-dimensional layout that can’t be solved with
nested single-dimensional layout to be uncommon.

Also, most interface problems are actually single-dimensional.

I think Grid will become more popular than it is, but never overtake Flexbox
as most people’s go-to for layout, because Flexbox is normally enough, and
Grid is too complex. I use it from time to time, and I have taken the trouble
to know exactly what it’s _capable_ of, so that I know when I should reach for
it rather than Flexbox or something else or giving up, but I normally need to
look up various properties when I go to use it. Meanwhile, most of what people
want to achieve with Flexbox is just `display: flex;` plus `flex-direction`,
`flex`, `align-items` and `justify-content`, and there are few enough knobs
that you can essentially brute-force it without trouble—and the Flexbox
Inspector makes it even easier, in a way that the Grid Inspector can’t
_really_ because Grid is just _too_ powerful.

------
exodust
Been smashin Flexbox lately, it's a significant win for frontend, and now
widely supported.

I usually have this cheat sheet open: [http://yoksel.github.io/flex-
cheatsheet/#display](http://yoksel.github.io/flex-cheatsheet/#display)

I like because it has the "applies to: container/items" clearly shown for each
property, which I always forget...

The next thing I want to try is using css transitions to "animate" flexbox
containers so that dynamic content inside smoothly expands the height of the
container down the page, instead of the abrupt jump we're used to. I haven't
managed to crack this yet, but heard a rumour that it's possible. So if anyone
has tips.... (edit: found this which details the issue, and describes said
flexbox trick: [https://css-tricks.com/using-css-transitions-auto-
dimensions...](https://css-tricks.com/using-css-transitions-auto-dimensions/)
)

------
peyao
Installed Firefox Developer Edition after using only Chrome for awhile.
Pleasantly surprised how well everything works, especially the dev tools pane
-- feels more smooth than Chrome's dev tools.

~~~
est31
This is weird. Some people claim that Firefox's dev tools are better, others
claim that the Chrome dev tools are better and that Firefox doesn't even
compare. I wonder who is right. Is this like comparing different car brands
where you can never reach a good conclusion? I personally have always been
using Firefox, so its dev tools are most familiar to me, but there have been
times where I've run into unimplemented features that were implemented in
Chrome.

~~~
chrismorgan
In matters of layout, Firefox has tended to have a substantial lead. In
matters of script debugging, Chrome has tended to have a substantial lead. In
other places, it’s not so consistent.

Take debugging as an area where I think it is fair to say that Chrome is
_miles_ ahead at present:

Chrome’s debugger is fast; pausing normally takes under a second to finish
updating the UI, and stepping mostly takes a slight fraction of a second. It
is also particularly helpful, showing the values of variables at the end of
each line when stepping through.

Firefox’s debugger is slow; pausing typically takes several seconds for the UI
to catch up, and stepping tends to take a second or two, with some UI
thrashing. It is unreliable in the presence of source maps (you put a
breakpoint on line 1234 of the source? Well that translated to line 1 in
what’s actually being executed, and breakpoints are no more precise than
linewise, so… yeah). Firefox Nightly’s debugger is also currently completely
broken for me at FastMail due to
[https://bugzilla.mozilla.org/show_bug.cgi?id=1516941](https://bugzilla.mozilla.org/show_bug.cgi?id=1516941),
so I’m having to spin up Chrome when I need to do any debugging, which I don’t
like having to do. In the normal run of things, I stick with Firefox even
through its slow debugger, because I _do_ find that it does a better job in
some areas of debugging (I think it was examining values and operating at
varying layers of the stack).

For personal context: I’ve been a Firefox user since about 0.93, and have had
Nightly as my daily driver most of the time for several years. I don’t much
like Chrome. That doesn’t stop it from being better in certain areas, though.

~~~
0xcoffee
This has been my experience too. Firefox is my primary browser but I never
could get the debugger to work inside promises for some reason. The firefox
layouting engine is amazing. I develop some crazy inefficient DOM layouts when
prototyping and Firefox will happily chug through it while Chrome will choke.
But when I have to debug I go back into Chrome..

------
saagarjha
> Mobile-inspired navigation & structure

This is an interesting choice for a desktop developer tool. Was this purely a
design choice, or did the new structure end up being more accessible?

~~~
luhn
Since the flexbox inspector is is a sidebar in the DevTools, they're working
with similar size constraints as a mobile device. I think taking design
inspiration from mobile makes sense.

------
uallo
I stumbled upon this today while using Firefox Developer Edition and I have to
say it is very useful. Thanks for the write-up.

