字幕列表 影片播放 列印所有字幕 列印翻譯字幕 列印英文字幕 - 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.