依赖项
您可能希望通过列实现多种设计模式
教程
您需要选择不同的布局方法来实现您的要求。
连续内容流 — 多列布局
如果您使用多列布局创建列，您的文本将保持连续流，依次填充每个列。所有列的大小必须相同，您无法单独定位某个列或某个列的内容。
您可以使用 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;
}
使用网格
- 用于多行或多列项目。
- 当您希望能够在块轴和内联轴上对齐项目时。
- 当您希望项目按行和列对齐时。