怎么让div中两个元素位于两端

怎么让div中两个元素位于两端
将div设置为flex布局，并且将justify-content属性设置为space-between;

<div v-for="patientId in patientIds" :key="patientId" style="display: flex; flex-direction: column; ">
  <div style="margin-bottom: 10px; border-color: #99a9bf; border-width: 2px;  border-style: solid; margin-left:30%; margin-right:30%; display: flex;
    font-size: 20px; font-weight: bold; flex-direction: row; justify-content: space-between">
    <router-link :to="'/patients/' + patientId">病人 {{ patientId }}</router-link>
  	<el-button size="mini" type="success" @click="downloadFile" >下载该病人文件</el-button>
  </div>
</div>

效果如下：