Placeholder Image

字幕列表 影片播放

  • - One of the biggest questions people ask

    人們初接觸CSS Grid時

  • when they first learn about CSS Grid is,

    最常問到的是

  • "Hey, does this replace Flexbox?

    這可以取代 Flexbox 嗎?

  • "Should I use Grid instead of Flexbox?"

    我該使用Grid,而不是Flexbox嗎?

  • No, that's not really how things are gonna work.

    不,情形不是這樣

  • So, Grid has been invented to do things that

    Grid能做到Flexbox不能做到的事

  • Flexbox couldn't do, and Flexbox is still

    Flexbox仍然我們的好工具,能做到 Grid不能做到的

  • 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

    老舊的 CSS 技巧來佈局

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

    例如, floats

  • Floats, for example, there'll be

    很多時候都會使用到 float

  • plenty of times to use a float.

    而網頁流動的佈局方式

  • And flow, the way the web pages get laid out,

    早於CSS發明之前

  • the way it's always been before CSS

    內容流動的方式

  • actually was invented, the way content flows

    向頁面下的 block 方向

  • down the page in a block direction

    或 inline 方向

  • or an in-line direction, these are all

    這些都是整體的一部份

  • parts of a larger picture that we'll

    我們要理解,並將 Grid 放進其中

  • want to understand, and put Grid into that situation.

    我們會在頁面某部份使用 Grid

  • 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,

    比如當年的 Bootstrap或Foundation,或960 Grid

  • 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.

    所以,你會混合使用 Grid 跟其他東西

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

    你會將Grid混合Flexbox使用

  • You'll mix Grid with Flexbox.

    你會將Grid配合基本流動

  • You'll mix Grid with a basic flow.

    你會將Grid混合floats,跟其他東西

  • You'll mix Grid with floats, with other kinds of things.

    那你為什麼要使用Flexbox?

  • So, why do you wanna use Flexbox?

    你為什麼要使用CSS Grid?

  • Why do you wanna use CSS Grid?

    你應該在什麼時候使用哪個?

  • Which ones should you use when?

    如果你想要往一個方向排列

  • Flexbox is really great when you want to

    Flexbox 很有用

  • 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

    Grid 能夠排列兩個方向的東西

  • and not in the other direction.

    事實上,Grid總是想要

  • 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

    顯示了你會用Grid

  • those directions at the same time.

    來排列兩個方向的東西

  • So, here's a diagram of a layout that

    這圖顯示了

  • you would do with Grid, where things

    在 Flexbox 時

  • 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,

    Grid擅長什麼 Flexbox擅長什麼

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

    有些情況 Flexbox 或 Grid 是通用的

  • Here's a diagram that really kind of shows you

    它們做同樣的事

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

    有一件事,Grid可以做

  • There are some situations where Flexbox

    但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.

    那你肯定想要使用Grid

  • 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,

    我們將使用Grid

  • so we don't wanna use some sort of absolute positioning,

    我們使用Grid 但我們也可以使用Flexbox

  • or something that's not gonna work

    如果沒有重疊的話 但是因為有重疊

  • for different amounts of content.

    我們想在這情況下使用Grid

  • We're gonna use Grid for this.

    所以,了解Grid,了解Flexbox

  • 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.

- One of the biggest questions people ask

人們初接觸CSS Grid時

字幕與單字

影片操作 你可以在這邊進行「影片」的調整,以及「字幕」的顯示

B1 中級 中文 英國腔 方向 使用 頁面 排列 重疊 計算

Flexbox v.s CSS Grid - 哪個更好? (Flexbox v.s CSS Grid - Which is Better?)

  • 60 4
    黃樺琳 發佈於 2021 年 01 月 14 日
影片單字