flex布局两个均分

可以使用Flex布局的`justify-content`属性来实现两个均分的效果。假设有一个父容器，里面包含两个子元素，你可以将父容器的`display`属性设置为`flex`，然后使用`justify-content: space-between`来让两个子元素均分父容器的空间。

以下是一个示例代码：

HTML:

<div class="container">
  <div class="child">Child 1</div>
  <div class="child">Child 2</div>
</div>

CSS:

.container {
  display: flex;
  justify-content: space-between;
}

.child {
  flex: 1;
}

在上面的示例中，`.container`是父容器，`.child`是子元素。通过给`.container`设置`display: flex`，使其成为一个Flex容器。然后，使用`justify-content: space-between`将两个子元素均分父容器的空间。而`.child`设置`flex: 1`，让它们平均占据剩余空间。

这样，两个子元素就会被均分在父容器中了。你可以根据实际需求调整样式和内容。

相关问题

flex布局 一行两列均分左对齐

可以使用flex布局实现一行两列均分且左对齐的效果。以下是实现步骤：

HTML结构：

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
</div>

CSS样式：

.container {
  display: flex;
  justify-content: flex-start;
}

.item {
  flex-grow: 1;
}

解释如下：
- 将要布局的元素包裹在一个父容器中，使用`display: flex;`设置父容器为flex布局。
- 使用`justify-content: flex-start;`将子元素左对齐。
- 使用`flex-grow: 1;`将子元素均分父容器的宽度。

这样，两个子元素就会均分父容器的宽度并左对齐了。

1、使用flex布局中设定日历,要求左右2侧各位10rpx,中间组件为80rpx,其余空间均分;

使用flex布局实现日历，要求左右两侧各占10rpx，中间组件占80rpx，其余空间均分可以按照以下步骤进行操作：

1. 创建一个容器元素，并设置其为flex布局，可以通过设置`display: flex`来实现。

2. 将容器元素的`justify-content`属性设置为`space-between`，这样就可以实现左右两侧各为10rpx的效果。

3. 在容器元素中，创建左侧组件，并设置其宽度为10rpx，可以使用`flex-basis`属性来设置。

4. 在容器元素中，创建中间组件，并设置其宽度为80rpx。

5. 在容器元素中，创建右侧组件，并设置其宽度为10rpx。

6. 在容器元素中，剩余的空间会自动均分给左右两侧的组件，可以通过设置`flex-grow`属性来实现。

7. 最终的HTML和CSS代码如下：

<div class="container">
  <div class="left"></div>
  <div class="middle"></div>
  <div class="right"></div>
</div>

.container {
  display: flex;
  justify-content: space-between;
}

.left,
.right {
  flex-basis: 10rpx;
}

.middle {
  flex-basis: 80rpx;
}

通过以上步骤，就可以使用flex布局实现日历，左右两侧各占10rpx，中间组件占80rpx，剩余空间均分的效果。