flex布局

代码<template>

  <div>
    <div
      class="right3box"
      :style="{width: 500+'px', height:132+'px',top:200+'px',marginLeft:70+'px'}"
    >
      <div class="text3" style="flex: 1;border-right: 1px solid black;">222</div>
      <div class="text3" style="flex: 1;border-right: 1px solid black;">444</div>
      <div class="text3" style="flex: 1">333</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.right3box {
  /* 给父盒子设置相对定位 */
  /* position: absolute; */
  /* 给父盒子设置相对定位 */
  position: relative;
  display: flex;

 /*
按行布局

 flex-direction: column;*/

  font-weight: 550;
  background: hsl(60, 9%, 98%);

  box-shadow: 0 0 0 1px #0f0b00;
}
</style>

效果