在关于CSS Grid Layout和Flexbox的所有兴奋中,常常忽略另一种布局方法。在本文中,我将介绍多列布局-通常称为multicol或有时称为“ CSS列”。您会发现它适合执行哪些任务,以及在创建列时要注意的一些事项。
什么是Multicol?
multicol的基本思想是,您可以获取大量内容并将其分成多列,例如在报纸上。通过使用两个属性之一来执行此操作。该column-count
属性指定您希望内容分成的列数。该column-width
属性指定理想的宽度,使浏览器可以确定可以容纳多少列。
变成multicol容器的内容中包含哪些元素并不重要,所有内容均保持正常流动,但分成几列。这使得multicol不同于我们今天在浏览器中使用的其他布局方法。以Flexbox和Grid为例,采用容器的子元素,然后这些项目将参与Flex或网格布局。使用multicol时,除了在列中之外,您仍然具有正常的流程。
在下面的示例中,我使用column-width
,以显示至少为的列14em
。Multicol会分配尽可能多的14em
列,然后共享这些列之间的剩余空间。14em
除非我们只能显示一列,否则列将至少为,在这种情况下,列可能会更小。Multicol是我们第一次在CSS中看到这种行为,创建的列默认情况下是必须响应的。您不需要添加“媒体查询”并更改各种断点的列数,而是可以指定最佳宽度,浏览器即可解决。