uniapp  用flex布局，三个按钮在第一行，两个选择框在第二行，关闭按钮在第三行

以下是示例代码：

```html

<template>

  <view class="container">

    <view class="row">

      <button class="button">按钮1</button>

      <button class="button">按钮2</button>

      <button class="button">按钮3</button>

    </view>

    <view class="row">

      <view class="checkbox">

        <checkbox class="checkbox-item" value="{{checked1}}"></checkbox>

        <text>选项1</text>

      </view>

      <view class="checkbox">

        <checkbox class="checkbox-item" value="{{checked2}}"></checkbox>

        <text>选项2</text>

      </view>

    </view>

    <view class="row">

      <button class="close-button">关闭</button>

    </view>

  </view>

</template>

<style>

  .container {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    height: 100vh;

  }

  .row {

    display: flex;

    flex-direction: row;

    justify-content: center;

    align-items: center;

    margin-bottom: 20px;

  }

  .button {

    width: 100px;

    height: 40px;

    background-color: #409EFF;

    color: #fff;

    border: none;

    border-radius: 4px;

    margin-right: 10px;

  }

  .checkbox {

    display: flex;

    flex-direction: row;

    justify-content: center;

    align-items: center;

    margin-right: 20px;

  }

  .checkbox-item {

    margin-right: 10px;

  }

  .close-button {

    width: 100px;

    height: 40px;

    background-color: #F56C6C;

    color: #fff;

    border: none;

    border-radius: 4px;

  }

</style>

```

效果如下：


让第一行的按钮之间有5px距离

可以在按钮的样式中添加 `margin-right: 5px;`，如下所示：

```html

<template>

  <view class="container">

    <view class="row">

      <button class="button">按钮1</button>

      <button class="button">按钮2</button>

      <button class="button">按钮3</button>

    </view>

    <view class="row">

      <view class="checkbox">

        <checkbox class="checkbox-item" value="{{checked1}}"></checkbox>

        <text>选项1</text>

      </view>

      <view class="checkbox">

        <checkbox class="checkbox-item" value="{{checked2}}"></checkbox>

        <text>选项2</text>

      </view>

    </view>

    <view class="row">

      <button class="close-button">关闭</button>

    </view>

  </view>

</template>

<style>

  .container {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    height: 100vh;

  }

  .row {

    display: flex;

    flex-direction: row;

    justify-content: center;

    align-items: center;

    margin-bottom: 20px;

  }

  .button {

    width: 100px;

    height: 40px;

    background-color: #409EFF;

    color: #fff;

    border: none;

    border-radius: 4px;

    margin-right: 5px; /* 添加这一行 */

  }

  .checkbox {

    display: flex;

    flex-direction: row;

    justify-content: center;

    align-items: center;

    margin-right: 20px;

  }

  .checkbox-item {

    margin-right: 10px;

  }

  .close-button {

    width: 100px;

    height: 40px;

    background-color: #F56C6C;

    color: #fff;

    border: none;

    border-radius: 4px;

  }

</style>

```

这样就可以让第一行的按钮之间有 5px 的间距了。