flex布局 两个元素平分页面高度

可以使用flex布局的`flex-grow`属性，将两个元素的`flex-grow`属性值都设置为1，这样它们就会平分页面的剩余空间，实现平分页面高度的效果。

以下是一个示例代码：

HTML：

<div class="container">
  <div class="item">元素1</div>
  <div class="item">元素2</div>
</div>

CSS：

.container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 设置容器高度为页面高度 */
}

.item {
  flex-grow: 1; /* 平分剩余空间 */
}

其中，`flex-direction: column`表示使用垂直方向的flex布局，`height: 100vh`设置容器高度为页面高度，`flex-grow: 1`设置两个元素的`flex-grow`属性值都为1，实现平分页面高度的效果。

相关问题

flex布局子元素固定平分父元素宽度

Flexbox（弹性盒模型）是一种现代CSS布局模式，用于创建灵活、响应式的网格和容器内的元素排列。如果你想要让flex布局中的子元素在水平方向上平均分配父元素的可用宽度，并且保持固定宽度，你可以使用以下方法：

1. 设置主轴对齐：首先，确保`.parent`（父元素）的`display`属性设置为`flex`或`inline-flex`，这将启用flex布局。

.parent {
  display: flex;
  justify-content: space-between; /* 这会让子元素均匀分布，它们之间的间隔会根据空间分配 */
}

2. 给子元素固定的宽度：给每个`.child`（子元素）设置宽度。例如，如果你想让子元素占据总宽度的30%，你可以这样写：

child {
  width: calc(33.33% - 1px); /* 如果你想留出边距，可以减去这个值 */
}

这里假设有三个子元素，所以总宽度被均分为四份（33.33%），为了避免相邻的两个子元素之间有额外的空白，我们通常会给子元素宽度减去一个小的负值，如上述的`-1px`。

3. 注意：由于浏览器的最小渲染单元是像素，可能会出现间距不精确的情况。为了避免这个问题，可以添加适当的单位，比如`calc(33.33vw - 1px)`，其中`vw`表示视口宽度的百分比。

相关问题：
1. 如何控制flex布局中元素的水平分布？
2. `justify-content`属性有哪些可选值？
3. 使用`calc()`函数有何作用？

flex布局平分两个

可以使用flex布局的`justify-content`属性来实现平分两个元素的效果。

首先，在父容器上设置`display: flex;`，这样子元素就可以按照一行排列。

然后，使用`justify-content: space-between;`属性，将两个子元素平分在父容器中。

以下是一个示例代码：

<style>
    .container {
        display: flex;
        justify-content: space-between;
    }
</style>

<div class="container">
    <div>元素1</div>
    <div>元素2</div>
</div>

这样子，两个子元素会自动平分在父容器的两侧。你可以根据实际需求进行进一步的样式调整。