🪴qql1's digital garden

多列布局

1分钟阅读

  • CSS
  • 如九宫格、网格、三栏布局等

特殊的多列布局

实现方案

  • 对于固定列数的布局，首推网格布局
  • child::

    自适应多列布局

    梗概

    • [use::弹性布局]
    • 固定的列设置宽度，自适应的列设计缩放

    示例

    假设我们有一个页面布局，其中包含两列内容：一列是固定宽度的侧边栏，另一列是自适应宽度的主要内容区域。

    <!DOCTYPE html>
<html>
<head>
	<style>
		.container {
			display: flex;
		}
		
		.sidebar {
			width: 200px; /* 固定宽度 */
			background-color: lightgrey;
		}
		
		.main-content {
			flex: 1; /* 自适应宽度 */
			background-color: lightblue;
			padding: 20px;
		}
		
	</style>
</head>
<body>
 
<div class="container">
	<div class="sidebar">
        <h2>Sidebar</h2>
        <p>This is the sidebar content.</p>
    </div>
 
    <div class="main-content">
        <h1>Main Content</h1>
        <p>This is the main content area. It will adjust its width based on the available space.</p>
    </div>
</div>
 
</body>
</html>

    在这个示例中，我们使用了弹性布局（flexbox）来实现自适应多列布局。侧边栏的宽度是固定的（200px），而主要内容区域会根据可用空间自动调整宽度。这样无论浏览器窗口大小如何变化，布局都会保持整洁且适应性强。

    指向原始笔记的链接

网格布局

child::网格布局

column样式

child::column样式

flex实现多列布局

child::

flex实现多列布局

梗概

  • 因为flex会自动换行，且无法直接控制一行有多少有元素，所以只能控制每个item的宽度，使其加起来刚好一行
  • 如可以通过直接设置item的宽度样式或flex-basic样式为百分比

与Grid实现多列布局的区别

  • flex可以由内容决定列的宽度
    • 比如flex容器不用定义每列的宽度, 而是由子item的宽度来撑起列的宽度
  • 而grid布局需要在容器上预先定义好列的数量和宽度

示例

指向原始笔记的链接

关系图谱

反向链接