flex layout
Ruan Yifeng-flex
you can set display:block,justify-content:space-between to the parent element of the project
first consider flex layout justify-content:space-between, compatible IE10+,
secondly, you can use margin-right, Then use the css3 selector nth-last-child to set the margin of the last element to 0
Picture description 
is this how it works? Hope to adopt
I wrote a very unelegant way to implement it, or there is a dom operation in vue is really .emmm. Disgusting
<template>
<div class="wrap">
<div :style="[key == 0 && marginLeft, key == items.length - 1 && marginRight]" class="text" v-for="(item, key) in items" :key="key"><span>{{ item }}</span></div>
</div>
</template>
<script>
export default {
props: {
items: {
type: Array,
default: () => {
return [];
}
}
},
data() {
return {
marginLeft: {
marginLeft: ''
},
marginRight: {
marginRight: ''
}
}
},
mounted() {
const texts = document.querySelectorAll('.text span');
this.marginLeft.marginLeft = `-${texts[0].offsetLeft}px`;
this.marginRight.marginRight = `-${texts[texts.length - 1].offsetLeft}px`;
}
}
</script>
<style lang="less">
.wrap {
display: flex;
justify-content: space-between;
.text {
position: relative;
flex: 1;
text-align: center;
&::after {
content: '';
position: absolute;
left: 0;
right: 0;
display: block;
margin: 5px auto;
width: 1px;
height: 10px;
background: -sharpccc;
}
}
}
</style>
when dealing with marginRight, you still take offsetLeft, taking into account that the text is centered, and the left and right offset are the same.
https://codepen.io/anon/pen/V.
flex can, and there is an exotic method that is more compatible. Put a row of equal width div, the first text-align:left, and the last right,. If the center, is text, you can consider
set the width in each child element (wide enough, then center the content), and then use space-between or space-around to implement
.
