<body>
<div class="bg-warning-subtle vw-100 vh-100 d-flex flex-column">
<div class="w-100 bg-primary">toolbar</div>
<div
id="container"
class="flex-grow-1 bg-secondary-subtle m-3"
style="overflow: hidden"
>
<div id="innerComponent" class="d-flex h-100">
<div
id="scrollable"
class="w-75 h-100 bg-white p-2"
style="overflow-y: auto"
>
<div class="bg-success mb-2" style="height: 500px">a</div>
<div class="bg-success" style="height: 500px">b</div>
</div>
<div
id="unscrollable"
class="w-25 h-100 overflow-hidden bg-info d-flex flex-column align-items-center p-2"
>
<button type="button" class="btn bg-light w-100 mb-2">
Base class 1
</button>
<button
type="button"
class="btn bg-light w-100"
style="margin-top: auto"
>
Base class 2
</button>
</div>
</div>
</div>
</div>
</body>
div 块级元素
在HTML中,块级元素(Block-level elements)默认的宽度是它的容器(通常是父元素)的100%,也就是它会自动占满可用的水平空间。而其默认高度则是由其内容决定的,即其内容有多高,元素就会自动扩展到相应的高度。块级元素不同于内联元素(Inline elements),后者默认情况下不会独占一行,并且其宽度和高度直接受其内容的影响。
body元素的默认宽度通常是视口(viewport)的宽度,这意味着它会扩展或收缩以适应浏览器窗口的宽度。默认情况下,body元素的宽度不是固定的,而是响应式的,它会根据浏览器窗口的大小变化而动态调整。
对于高度,body元素的默认高度是由其包含的内容决定的。如果内容的总高度超出了视口的高度,那么body元素(以及整个文档的高度)将扩展以适应所有内容,可能会引入滚动条。如果内容不足以填满视口的高度,则body的实际高度将等于视口的高度,这是因为现代浏览器通常会使html和body元素至少填满视口高度,避免页面看起来内容不足。但这种行为也可以通过CSS显式地进行改变。
定义文档的视口(Viewport):
<meta name="viewport" content="width=device-width, initial-scale=1.0">
CSS 弹性布局(Flexbox Layout),是一种先进的布局模型,旨在提供一种更有效的方式来布局、对齐和分配容器中项的空间,即使当这些项的大小是未知或是动态变化的。它主要用于一维布局,无论是水平还是垂直方向,Flexbox 都可以轻松地实现各种布局需求。
主要组件
- Flex 容器 (Flex Container): 使用 display: flex; 或 display: inline-flex; 属性定义的容器,它的直接子元素会成为 Flex 项。
- Flex 项 (Flex Items): Flex 容器直接的子元素,它们被布局成一行(水平地)或一列(垂直地)。
主要属性
- Flex 容器属性:
- display: 定义一个 Flex 容器;值为 flex(块级元素效果)或 inline-flex(行内元素效果)。
- flex-direction: 定义主轴方向;值有 row(默认,水平)、row-reverse、column、column-reverse。
- flex-wrap: 控制是否换行;值有 nowrap(默认,不换行)、wrap(换行)、wrap-reverse。
- flex-flow: 是 flex-direction 和 flex-wrap 的简写形式。
- justify-content: 定义在主轴上的对齐方式。
- align-items: 定义在交叉轴上如何对齐 Flex 项。
- align-content: 定义多根轴线的对齐方式。
- Flex 项属性:
- flex-grow: 定义 Flex 项的扩展比例。
- flex-shrink: 定义当空间不足时,Flex 项的缩小比例。
- flex-basis: 定义在分配多余空间前,Flex 项占据的主轴空间。
- flex: 是 flex-grow、flex-shrink 和 flex-basis 的简写,默认值为 0 1 auto。
- align-self: 允许单个 Flex 项有与其它项不同的对齐方式,可覆盖 align-items 属性。
在一个使用Flexbox布局的容器中,如果你希望其中的某个项目(flex项)充满容器的剩余空间,可以通过使用flex-grow属性来实现。flex-grow属性定义了项目的放大比例,默认值为0,即如果存在剩余空间,也不放大。
要让一个项目充满剩余空间,你可以这样设置:
.flex-container {
display: flex;
}
.flex-item {
flex-grow: 1;
}