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布局平分两个

可以使用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>

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

flex布局一行两个盒子

flex布局可以轻松实现一行两个盒子的布局。首先，将父容器设置为flex容器，通过设置display: flex来启用flex布局。然后，可以使用flex-wrap属性来控制是否换行，默认情况下，项目都是排列在一条线上，即不换行。 接下来，将子元素设置为flex项目，并使用flex属性来控制它们在父容器中的比例。通过设置flex: 1来使两个盒子平分父容器的宽度，即占用50%的空间。最后，可以使用其他属性来调整盒子的对齐方式、间距等。总结起来，实现一行两个盒子的flex布局的关键是设置父容器为flex容器，使用flex-wrap属性控制是否换行，使用flex属性控制子元素的比例。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [css布局——flex布局](https://blog.csdn.net/aimnr/article/details/121598272)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [Flex布局](https://download.csdn.net/download/weixin_38610870/16215679)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]