依賴項
您可能希望透過列實現多種設計模式
教程
您需要選擇不同的佈局方法來實現您的要求。
連續內容流 — 多列布局
如果您使用多列布局建立列，您的文字將保持連續流，依次填充每個列。所有列的大小必須相同，您無法單獨定位某個列或某個列的內容。
您可以使用 column-gap 或 gap 屬性控制列之間的間距，並使用 column-rule 在列之間新增分隔線。
點選下面程式碼塊中的“Play”按鈕，在 MDN Playground 中編輯示例。
<div class="container">
<p>
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
daikon amaranth tatsoi tomatillo melon azuki bean garlic.
</p>
<p>
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
Dandelion cucumber earthnut pea peanut soko zucchini.
</p>
<p>
Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter
purslane kale. Celery potato scallion desert raisin horseradish spinach
</p>
</div>
.container {
border: 2px solid rgb(75 70 74);
border-radius: 0.5em;
padding: 20px;
font: 1.2em sans-serif;
column-width: 10em;
column-rule: 1px solid rgb(75 70 74);
}
在此示例中，我們使用了 column-width 屬性來設定列所需的最小寬度，在此寬度之後瀏覽器才會新增額外的列。columns 簡寫屬性可用於設定 column-width 和 column-count 屬性，這兩個屬性都可以定義允許的最大列數。
何時使用多列
- 您希望文字以報紙式列顯示。
- 您有一組小專案，希望將其分成列。
- 您不需要對單個列框進行樣式設定。
單行等高專案 — 彈性盒
彈性盒可用於將內容分成列，方法是設定 display: flex; 使父元素成為彈性容器。只需新增此屬性，所有子項（子元素、偽元素和文字節點）就會沿單行成為彈性專案。設定具有單個數值的相同 flex 簡寫屬性將平均分配所有可用空間，通常使所有彈性專案大小相同，只要沒有非換行內容強制專案變大。
可以使用外邊距或 gap 屬性在專案之間建立間隙，但目前沒有 CSS 屬性可以在彈性專案之間新增分隔線。
<div class="container">
<p>
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
daikon amaranth tatsoi tomatillo melon azuki bean garlic.
</p>
<p>
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
Dandelion cucumber earthnut pea peanut soko zucchini.
</p>
<p>
Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter
purslane kale. Celery potato scallion desert raisin horseradish spinach
carrot soko.
</p>
</div>
.container {
border: 2px solid rgb(75 70 74);
border-radius: 0.5em;
padding: 20px 10px;
font: 1.2em sans-serif;
display: flex;
}
.container > * {
padding: 10px;
border: 2px solid rgb(95 97 110);
border-radius: 0.5em;
margin: 0 10px;
flex: 1;
}
要建立具有換行到新行的彈性專案的佈局，請將容器上的 flex-wrap 屬性設定為 wrap。請注意，每個彈性行只分配該行的空間。一行中的專案不一定會與另一行中的專案對齊，如下例所示。這就是為什麼彈性盒被描述為一維的。它旨在控制行或列的佈局，但不能同時控制兩者。
<div class="container">
<p>
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
daikon amaranth tatsoi tomatillo melon azuki bean garlic.
</p>
<p>
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
Dandelion cucumber earthnut pea peanut soko zucchini.
</p>
<p>
Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter
purslane kale. Celery potato scallion desert raisin horseradish spinach
carrot soko.
</p>
</div>
.container {
border: 2px solid rgb(75 70 74);
border-radius: 0.5em;
padding: 20px 10px;
width: 500px;
font: 1.2em sans-serif;
display: flex;
flex-wrap: wrap;
}
.container > * {
padding: 10px;
border: 2px solid rgb(95 97 110);
border-radius: 0.5em;
margin: 0 10px;
flex: 1 1 200px;
}
使用彈性盒
- 用於單行或單列專案。
- 當您希望在佈局專案後進行交叉軸對齊時。
- 當您樂於讓換行專案只沿其行共享空間，而不與其他行中的專案對齊時。
按行和列對齊專案 — 網格佈局
如果您想要一個二維網格，其中專案按行_和_列對齊，那麼您應該選擇 CSS 網格佈局。與彈性盒在彈性容器的直接子元素上工作類似，網格佈局在網格容器的直接子元素上工作。只需在容器上設定 display: grid;。在此容器上設定的屬性 — 例如 grid-template-columns 和 grid-template-rows — 定義了專案如何沿行和列分佈。
點選下面程式碼塊中的“Play”按鈕，在 MDN Playground 中編輯示例。
<div class="container">
<p>
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
daikon amaranth tatsoi.
</p>
<p>
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
tatsoi pea sprouts fava bean collard greens.
</p>
<p>
Nori grape silver beet broccoli kombu beet greens fava bean potato quandong
celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens
parsnip. .
</p>
</div>
.container {
border: 2px solid rgb(75 70 74);
border-radius: 0.5em;
padding: 20px;
width: 500px;
font: 1.2em sans-serif;
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
}
.container > * {
padding: 10px;
border: 2px solid rgb(95 97 110);
border-radius: 0.5em;
margin: 0;
}
使用網格
- 用於多行或多列專案。
- 當您希望能夠在塊軸和內聯軸上對齊專案時。
- 當您希望專案按行和列對齊時。