B1 中級 英國腔 159 分類 收藏
開始影片後,點擊或框選字幕可以立即查詢單字
字庫載入中…
回報字幕錯誤
- 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 與 CSS Grid - 哪個更好 ? (Flexbox v.s CSS Grid - Which is Better?)

159 分類 收藏
黃樺琳 發佈於 2018 年 8 月 22 日
看更多推薦影片
  1. 1. 單字查詢

    在字幕上選取單字即可即時查詢單字喔!

  2. 2. 單句重複播放

    可重複聽取一句單句,加強聽力!

  3. 3. 使用快速鍵

    使用影片快速鍵,讓學習更有效率!

  4. 4. 關閉語言字幕

    進階版練習可關閉字幕純聽英文哦!

  5. 5. 內嵌播放器

    可以將英文字幕學習播放器內嵌到部落格等地方喔

  6. 6. 展開播放器

    可隱藏右方全文及字典欄位,觀看影片更舒適!

  1. 英文聽力測驗

    挑戰字幕英文聽力測驗!

  1. 點擊展開筆記本讓你看的更舒服

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