初学者css常见问题_面向初学者CSS多列布局教程

初学者css常见问题

Reading very long lines of text can be problematic for some people. They will have to focus more on not missing a line instead of the text itself. This problem is easily solved by using multiple columns to lay out the content. Multiple columns are ubiquitous in print media. The CSS Multi-column Layout Module features enable us to recreate the same kind of multi-column effect on websites.

对于某些人来说，阅读很长的文本行可能会出现问题。 他们将不得不把更多的精力放在不丢失一行而不是文本本身上。 通过使用多列布局内容可以轻松解决此问题。 多列在打印介质中无处不在。 CSS多列布局模块功能使我们能够在网站上重新创建相同类型的多列效果。

One thing that makes it hard to use multiple columns when designing web pages is the inability to control the size of documents. In this tutorial, I will teach you how to create responsive multi-column layouts that look good on a variety of screen sizes. We will begin with the basics and then move on to more complex concepts.

在设计网页时，很难使用多列的一件事是无法控制文档的大小。 在本教程中，我将教您如何创建在各种屏幕尺寸上看起来都不错的响应式多列布局。 我们将从基础知识开始，然后继续讨论更复杂的概念。

浏览器支持 (Browser Support)

Browser support for multi-column layout is great if you are willing to use prefixes. This feature is supported by 95.32% browsers worldwide based on stats from Can I use. A few browsers like IE10+, Edge, and Opera Mini fully support multi-column layouts. Others like Firefox and Chrome need prefixes.

如果您愿意使用前缀，则浏览器对多列布局的支持非常有用。 根据“ 我可以使用”中的统计信息，全球95.32％的浏览器支持此功能。 IE10 +，Edge和Opera Mini等一些浏览器完全支持多列布局。 其他如Firefox和Chrome需要前缀。

There is an older polyfill available that you try if you require support for older browsers (usually this means IE9 and below). Of course, if a browser does not support multi-column features, the layout degrades gracefully to a single column layout. So a polyfill in this case might not be the best option.

如果需要对旧版浏览器的支持(通常是IE9及以下版本)，可以尝试使用旧版的polyfill 。 当然，如果浏览器不支持多列功能，则布局会优雅地降级为单列布局。 因此，这种情况下的polyfill可能不是最佳选择。

The CSS multi-column layout module has a number of different properties. In the following sections I will go over all of them one by one.

CSS多列布局模块具有许多不同的属性。 在以下各节中，我将一一介绍所有这些内容。

列数和列宽 (Column Count and Column Width)

The column-count property specifies the number of columns you want to set for an element. You can set it to auto or a positive number. When set to auto, the number of columns will be determined by the column-width property. If set to a positive number, all the columns are set to an equal width.

column-count属性指定要为元素设置的列数。 您可以将其设置为auto或正数。 设置为auto ，列数将由column-width属性确定。 如果设置为正数，则所有列均设置为相等的宽度。

The column-width property specifies the width of individual columns of an element. This is not to be followed strictly. For instance, columns can be narrower if there is not enough space available. This property too can be set to both an auto value or a positive number. If set to auto, the width will be determined by the column-count property. Available space will be divided among all columns equally.

column-width属性指定元素的各个列的宽度。 请勿严格遵守。 例如，如果没有足够的可用空间，则列可以更窄。 该属性也可以设置为auto值或正数。 如果设置为auto，则宽度由column-count属性确定。 可用空间将在所有列之间平均分配。

Alternatively, these two values can be set simultaneously using the shorthand columns property. The syntax for columns property would be:

或者，可以使用速记columns属性同时设置这两个值。 columns属性的语法为：

.example {
  columns: <'column-width'> || <'column-count'>
}

A few examples of this property in use are shown below with the interpretation in the comment beside each example:

下面显示了此属性的一些使用示例，并在每个示例旁边的注释中给出了解释：

.example {
  columns: 10em;      /* column-width: 10em / column-count: auto */
  columns: 4;         /* column-width: auto / column-count: 4 */
  columns: 4 auto;    /* column-width: auto / column-count: 4 */
  columns: auto 10em; /* column-count: auto / column-width: 4 */
  columns: auto;      /* column-count: auto / column-width: auto */
  columns: auto auto; /* column-count: auto / column-width: auto */
}

As you can see, the first columns definition is a shorthand for what you see in the fourth, and second one is shorthand for the third. Basically, if the integer does not have any unit assigned it is parsed as column-count.

如您所见，第一columns定义是第四columns的简写，第二columns是第三columns的简写。 基本上，如果整数没有分配任何单位，则将其解析为column-count 。

Here is a CodePen demo to demonstrate the features discussed so far

这是一个CodePen演示，以演示到目前为止讨论的功能

If you resize the window, you will notice a few things:

如果您调整窗口的大小，您会注意到以下几点：

• The column-count property always keeps the number of columns equal to the value you specify. The only thing that changes is the width of the columns.

  column-count属性始终使列数等于您指定的值。 唯一改变的是列的宽度。

• The column-width property automatically changes the number of columns based on available space. The number of columns is adjusted in such a way that column width is greater than the specified value. It may also adjust the width of all columns to a smaller value if there is not enough space available.

  column-width属性会根据可用空间自动更改列数。 列数以列宽大于指定值的方式进行调整。 如果没有足够的可用空间，它也可以将所有列的宽度调整为较小的值。

• The columns property uses the column-count value as the limit for maximum columns allowed. It keeps adjusting the width in such a way that column-count never exceeds the count limit and column-width is also in close proximity to the specified width.

  columns属性使用column-count值作为允许的最大列数限制。 它会不断调整宽度，以使column-count永远不会超过计数限制，并且column-width也非常接近指定的宽度。

列间距和列规则 (Column Gap and Column Rule)

The column-gap property allows us to specify the amount of space between columns. You can set it to normal or a length value. It can be zero but not negative. When you set it to normal, it uses the browser-defined default spacing between the columns.

column-gap属性允许我们指定列之间的空间量。 您可以将其设置为normal或长度值。 可以为零，但不能为负。 将其设置为normal ，它将使用浏览器定义的列之间的默认间距。

The column-rule property is a shorthand that enables us to add a line between columns. This is similar to using the border-left or border-right properties. This property follows the syntax:

column-rule属性是一种简写形式，使我们能够在列之间添加一行。 这类似于使用border-left或border-right属性。 此属性遵循以下语法：

.example {
  column-rule: <'column-rule-width'> || <'column-rule-style'> || <'column-rule-color'>
}

For column-rule-width, you can specify the width as a length like 3px or use a keyword like thin, medium, or thick. column-rule-style accepts values like dashed, dotted, solid, etc. You can use all the valid values of the border-style property with column-rule-style and column-rule-color can be any valid color value.

对于column-rule-width ，可以指定宽度的像的长度3px或使用关键字等thin ， medium ，或thick 。 column-rule-style接受dashed ， dotted ， solid等值。您可以将border-style属性的所有有效值与column-rule-style和column-rule-color可以是任何有效的颜色值。

Here is a CodePen demo with these properties used together

这是将这些属性一起使用的CodePen演示

列填充和列跨度 (Column Fill and Column Span)

The column-fill property determines how the content is to be partitioned to fill various columns. This property can be set to auto or balance. When set to auto, the columns are filled sequentially. Using balance makes sure that the content is divided equally between all the columns.

column-fill属性确定如何对内容进行分区以填充各种列。 可以将此属性设置为auto或balance 。 设置为auto ，将按顺序填充列。 使用balance可以确保在所有列之间平均分配内容。

One thing worth keeping in mind is that, if you set a fixed height on a columned element, Firefox automatically balances the content. Other browsers, however, start filling the columns sequentially.

值得记住的一件事是，如果您在列元素上设置了固定的高度，则Firefox会自动平衡内容。 但是，其他浏览器开始按顺序填充列。

The column-span property controls how an element spans across multiple columns. It has two possible values: all or none. When set to all, the element spans across all columns. This property is not supported in Firefox.

column-span属性控制元素如何跨多列。 它有两个可能的值： all或none 。 设置为all ，该元素跨越所有列。 Firefox不支持此属性。

Here is a CodePen demo that “spans” a blockquote element across all columns

这是一个CodePen演示，它跨所有列“跨越” blockquote元素

In Firefox, the blockquote ends up in the middle column, which might be an acceptable fallback.

在Firefox中，blockquote结尾在中间一列，这可能是一个可以接受的回退。

创建具有多列的响应式布局 (Creating Responsive Layouts with Multiple Columns)

Now that you are up to speed on the different properties and possible values, let’s focus on keeping our layout responsive as well as user friendly.

现在您可以快速掌握不同的属性和可能的​​值，接下来让我们集中精力保持布局的响应性和用户友好性。

Both column-count and column-width have their own issues. While column-count keeps the number of columns in check on larger devices, the layout will break on smaller ones. Similarly, column-width will make sure that the columns are not too narrow on smaller devices but result in lots of columns on larger ones.

column-count和column-width都有其自身的问题。 虽然column-count可以检查较大设备上的列数，但布局会在较小设备上中断。 同样， column-width将确保在较小的设备上列不会太窄，而在较大的设备上会导致很多列。

To make sure your layout looks good on all screen sizes, you should specify both column-count and column-width. This way you can keep the width and number of columns under control. You might still need to fix a few issues, however, which we will discuss next.

为了确保您的布局在所有屏幕尺寸上都看起来不错，您应该同时指定column-count和column-width 。 这样，您可以控制宽度和列数。 但是，您可能仍需要解决一些问题，我们将在下面讨论。

固定水平滚动 (Fixing Horizontal Scrolling)

If you specify a fixed height for your columns, making the viewport narrower will result in a horizontal scrollbar. Since the content cannot expand vertically, it will grow horizontally. To fix this, you can resize your browser to know the width when horizontal scrollbars first appear. Then, you use media queries to set the height of columns to auto below that width. Here is the code to do so:

如果您为列指定了固定的高度，则缩小视口将导致水平滚动条。 由于内容无法垂直扩展，因此将水平扩展。 要解决此问题，您可以调整浏览器的大小，以了解水平滚动条首次出现时的宽度。 然后，您使用媒体查询将列的高度设置为auto低于该宽度。 这是这样做的代码：

.responsive-height {
  height: 250px;
}

@media (max-width: 1040px) {
  .responsive-height {
    height: auto;
  }
}

This CodePen demo shows both the problem and possible solution

此CodePen演示同时显示了问题和可能的解决方案

Resize the window to see how both examples respond.

调整窗口大小，以查看两个示例如何响应。

固定很长的列 (Fixing Very Long Columns)

If your columns are too long, it will be an annoyance for users to keep scrolling up and down to read all the content. When the height of columns becomes greater than the viewport height itself, it is a good idea to get rid of multiple columns. This can be achieved again using media queries:

如果您的列太长，那么用户继续上下滚动以读取所有内容会很烦人。 当列的高度大于视口本身的高度时，最好删除多个列。 可以使用媒体查询再次实现：

@media (min-width: 800px) {
  .long-columns {
    columns: 3 200px;
  }
}

In this case, I am using multiple columns only when the viewport width is such that users no longer have to scroll up and down.

在这种情况下，仅当视口宽度使用户不再需要上下滚动时，才使用多列。

View demo with multiple columns and media queries

查看具有多个列和媒体查询的演示

结论 (Conclusion)

I hope this introduction to CSS’s multi-column layout module has made you familiar with this feature. These properties can be a nice addition to your responsive design toolbox, and if you are still required to support older browsers, multiple columns usually degrade gracefully to a single column.

我希望对CSS多列布局模块的介绍能使您熟悉此功能。 这些属性可以很好地添加到响应式设计工具箱中，如果仍然需要支持较旧的浏览器，则通常将多列降级为单列。

翻译自: https://www.sitepoint.com/css-multi-column-layout-tutorial-for-beginners/

初学者css常见问题