B1 中級 166 タグ追加 保存
- One of the biggest questions people ask
when they first learn about CSS Grid is,
"Hey, does this replace Flexbox?
"Should I use Grid instead of Flexbox?"
No, that's not really how
things are gonna work.

So, Grid has been
invented to do things that

Flexbox couldn't do, and Flexbox is still
a great tool for us to use to
do things that Grid can't do.

And we're also gonna use
a lot of the other parts

of CSS that we've used for
layout for a long time.

Floats, for example, there'll be
plenty of times to use a float.
And flow, the way the
web pages get laid out,

the way it's always been before CSS
actually was invented,
the way content flows

down the page in a block direction
or an in-line direction, these are all
parts of a larger picture that we'll
want to understand, and put
Grid into that situation.

We'll use Grid on certain
parts of the page,

and not on other parts of the page.
It's not like the tools
that we've been using,

say, Bootstrap or Foundation,
or 960 Grid, back in the day.

It doesn't handle layout
for the whole page.

It handles layout for
a particular container,

one container on the page, and the items
that are directly, a direct
child of that container.

So, you're gonna mix
Grid with other things.

You'll mix Grid with Flexbox.
You'll mix Grid with a basic flow.
You'll mix Grid with floats,
with other kinds of things.

So, why do you wanna use Flexbox?
Why do you wanna use CSS Grid?
Which ones should you use when?
Flexbox is really great when you want to
line things up in one direction.
Maybe you could think of it as
a whole bunch of boxes that are in an
infinitely long line.
Oh, but it's not infinitely long.
It's actually a limited amount of space,
so it happens to wrap, or doesn't wrap.
Whether it wraps or not, the calculations
that are being made are all happening
one line at a time.
The browser only ever thinks about things
in one dimension at a time.
It doesn't have any way to know
if you happen, if you end up
with several different rows,

it doesn't calculate
information across those rows,

or if you're going in the other direction.
It will calculate them in one direction
and not in the other direction.
Grid has the ability to line
things up in two directions.

And in fact, Grid always wants to
line things up in two directions.
You can't get it to
kind of stagger things.

It thinks about rows and
columns at the same time,

and it's gonna wanna make
adjustments to your grid,

based on what's going on in both of
those directions at the same time.
So, here's a diagram of a layout that
you would do with Grid, where things
are actually lining up in both directions.
And here's a diagram of how things
might work out in Flexbox, where the
calculations are being done in each row,
one at a time with no
regard to the other rows,

and you can see that those
things don't actually line up.

Perhaps, it's dependent on
the size of the content,

or the size of the amount
of stuff that's on the page.

Here's a diagram that
really kind of shows you

what Grid is good at, and
what Flexbox is good at.

There are some situations where Flexbox
or Grid could be used,
where they basically

do the same thing.
One thing though, that Grid can do that
Flexbox cannot do, is
intentionally overlap items.

So if you're in a situation where maybe
either one would work, but you want to
overlap items, then that's gonna be
a situation you definitely
want to use Grid in.

Here's an example where we've got
images that are content images,
not background images,
but images in the content.

And then, I've got a
sentence for each one,

and a little background colour
on each of those sentences.

The sentences are different lengths,
so we don't wanna use some
sort of absolute positioning,

or something that's not gonna work
for different amounts of content.
We're gonna use Grid for this.
But we're using Grid,
we could use Flexbox,

if there's no overlap, but
because there's overlap,

we wanna use Grid in this situation.
So, get to know Grid, get to know Flexbox.
Kind of know what each one is best at,
and then use whichever one is best.
It depends on which one
has the super powers

that you need at that moment.


Flexbox v.s CSS Grid - Which is Better?

166 タグ追加 保存
黃樺琳 2018 年 8 月 22 日 に公開
  1. 1. クリック一つで単語を検索


  2. 2. リピート機能


  3. 3. ショートカット


  4. 4. 字幕の表示/非表示


  5. 5. 動画をブログ等でシェア


  6. 6. 全画面再生


  1. クイズ付き動画


  1. クリックしてメモを表示

  1. UrbanDictionary 俚語字典整合查詢。一般字典查詢不到你滿意的解譯,不妨使用「俚語字典」,或許會讓你有滿意的答案喔